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 but 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)

1. Run setup.cmd
2. Open MusicFestival.Vue.Template.sln
3. Hit Ctrl + F5
4. Login with either one of the following:

• epiEdit.js: a directive that can be added on components to make them editable (e.g. <span v-epi-edit="Name">).
• EpiProperty.vue: a component that renders a button to edit a property (e.g. <epi-property property-name="Name">).
• epiDataModelMixin.js: adds a model property to any component and keeps it updated when content is updated.
• epiContext.js: makes inEditMode and isEditable flags available to the OPE helpers.

• 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
        Site.vue
            router-view (Vue.js)
                router.js
                    PageComponentSelector.vue (owns the model)
                        ArtistContainerPage/ArtistDetailsPage/LandingPage.vue
 
PreviewController.cs
    Preview/Index.cshtml (sets content-link attribute on <preview>)
        Preview.vue (owns the model, and renders multiple BlockComponentSelector)
            BlockComponentSelector.vue
                BuyTicketBlock/ContentBlock/GenericBlock.vue

• 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.