MusicFestival Vue.js Templates
This sample site demonstrates one approach to render Episerver content in a client side framework that is using client side routing for navigation with a working On Page Edit (OPE) mode in the Episerver UI.
This particular solution uses Vue.js with Vuex to handle the state of the app in a
single source of truth. Most of the techniques are framework agnostic and can be used with any other framework, such as React or Angular.
Content is fetched from Episerver using the Content Delivery API: https://world.episerver.com/documentation/developer-guides/CMS/Content/content-delivery-api/
This project uses:
- npm 6+
- Visual Studio 2015+
- SQL Server 2016 Express LocalDB (download here)
Setup and Run
Ctrl + F5
- Or build with
build.cmd, and set up the site on IIS or run
- Or build with
- Login on
/episerverwith either one of the following:
Vuex store modules
- epiDataModel.js: the module that stores and updates the model object to be displayed on every component.
- epiContext.js: makes
isEditableflags available to the OPE helpers.
On-Page Editing helpers
- epiEdit.js: a directive that can be added on components to make them optionally editable (e.g.
<span v-epi-edit="Name">), through
- EpiProperty.vue: a component that renders a button to edit a property (e.g.
- epiMessages.js: registers the
epiReadymessage handlers that updates the vuex store.
- PageComponentSelector.vue: loads the Vue page component and owns its model.
- BlockComponentSelector.vue: loads the Vue block component.
- EpiLink.vue: regular links when in OPE and Vue router links otherwise.
- EpiViewModeLink.vue: disables links completely when in OPE.
- ExtendedContentModelMapper.cs: flattens the ContentDeliveryAPI JSON and enables languages.
- ContentDeliveryExtendedRouting folder: regular routing with friendly URLs is enabled by Johan Björnfot's ContentDeliveryExtendedRouting (see his github page and his blog).
To avoid having multiple razor files the pages and blocks have their own controller and only one razor view each.
DefaultPageController.cs DefaultPage/Index.cshtml DefaultPage.vue router-view (Vue.js) router.js (Updates the store model with the url) PageComponentSelector.vue (Use the model from the store) ArtistContainerPage/ArtistDetailsPage/LandingPage.vue (Gets the model as a prop) PreviewController.cs Preview/Index.cshtml (sets content-link attribute on <preview>) Preview.vue (Use and update the model in the store with the content link) BlockComponentSelector.vue (Gets the model as a prop and passes it on) BuyTicketBlock/ContentBlock/GenericBlock.vue (Gets the model as a prop)
Building client side resources
npm run webpack: Alias for
npm run webpack-build-dev.
npm run webpack-build-dev: Builds a development package.
npm run webpack-watcher: Builds a development package, and re-builds automatically when relevant files are changed.
npm run webpack-build-prod: Builds a production package.
Debugging Vuex state
Using the Vue-devtools to see the state changes in the store in view mode works as expected. There are however some limitations to follow state changes when you are editing in Episerver edit mode because of the site is running inside an iframe. To be able to see the vuex state while editing you need to run the stand alone electron app as described on the github page: Vue standalone Electron app.