The Vue.js version of the MusicFestival template site
Switch branches/tags
Nothing to show
Clone or download
nicklasisraelsson Use vuex (#4)
Start storing all app state in a vuex store.

This replaces the EpiDataModexMixin and the $epi and $app properties to create a "single source of truth" for the site.
Latest commit b470cb8 Dec 4, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.nuget Public release 🚀 Oct 26, 2018
build Upgrade ContentApi to 2.1.0 Nov 13, 2018
src Use vuex (#4) Dec 4, 2018
.editorconfig Public release 🚀 Oct 26, 2018
.eslintignore Public release 🚀 Oct 26, 2018
.eslintrc.js Public release 🚀 Oct 26, 2018
.gitattributes Public release 🚀 Oct 26, 2018
.gitignore Public release 🚀 Oct 26, 2018
.stylelintrc.js Public release 🚀 Oct 26, 2018
LICENSE Public release 🚀 Oct 26, 2018
MusicFestival.Vue.Template.sln Public release 🚀 Oct 26, 2018
NuGet.config Public release 🚀 Oct 26, 2018
README.md Use vuex (#4) Dec 4, 2018
package-lock.json Use vuex (#4) Dec 4, 2018
package.json Use vuex (#4) Dec 4, 2018
setup.cmd Public release 🚀 Oct 26, 2018

README.md

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/

Prerequisites

This project uses:

  • npm 6+
  • Visual Studio 2015+
  • SQL Server 2016 Express LocalDB (download here)

Setup and Run

  1. Run setup.cmd
  2. Open MusicFestival.Vue.Template.sln
  3. Hit Ctrl + F5
  4. Login with either one of the following:
Name Password Mailbox Email
cmsadmin sparr0wHawk
emil sparr0wHawk https://www.mailinator.com/v3/index.jsp?zone=public&query=epic-emil epic-emil@mailinator.com
ida sparr0wHawk https://www.mailinator.com/v3/index.jsp?zone=public&query=epic-ida epic-ida@mailinator.com
alfred sparr0wHawk https://www.mailinator.com/v3/index.jsp?zone=public&query=epic-alfred epic-alfred@mailinator.com
lina sparr0wHawk https://www.mailinator.com/v3/index.jsp?zone=public&query=epic-lina epic-lina@mailinator.com

Notable files

Vuex store modules

  • epiDataModel.js: the module that stores and updates the model object to be displayed on every component.
  • epiContext.js: makes inEditMode and isEditable flags available to the OPE helpers.

On-Page Editing helpers

  • 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">).
  • epiMessages.js: registers the beta/contentSaved and beta/epiReady message handlers that updates the vuex store.

Routing helpers

API

Overall structure

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.