After being announced around the 2016 time frame and running through multiple beta’s and CTP’s, Sitecore JSS finally was production ready when it was released together with Sitecore 9.1 during Symposium 2018. For those of you who have been living under a rock or are not familair with Sitecore development, let’s summarize what Sitecore JSS is all about:
Before starting with the actual blog-post, for non Sitecore developers out there (hopefully regular Vue.js developers out there will read it as well) let’s summarize what Sitecore actually is:
Sitecore is the global leader in digital experience management software that combines content management, commerce, and customer insights. The Sitecore Experience Cloud™ empowers marketers to deliver personalized content in real time and at scale across every channel—before, during, and after a sale. In other words: Sitecore is the most popular Enterprise Digital platform at the moment.
What is Vue.js?
Vue.js is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
I’ve seen a couple of ‘Sitecore in combination with Vue.js’ blogposts out there, but they were all NON Sitecore JSS related and were targeted at standard Sitecore MVC development:
- Vue.js components in the Sitecore Experience Editor by George Chang
- Using VueJs in Sitecore by Dave Leigh
- Sitecore and Vue.js by Dmitry Ryabtsev
Let’s get started with Sitecore JSS and Vue.js development
Before actually able to start with Sitecore JSS development, let’s make sure we have the necessary pre-requisites installed:
- Make sure to install Vue.js (through npm install vue)
It’s then time to install Sitecore JSS, make sure to install the Sitecore JSS CLI
- npm install -g @sitecore-jss/sitecore-jss-cli
Now that we have the Sitecore JSS CLI in place, which allows us to quickly scaffold out Sitecore Single Page Applications (SPA’s). It provides build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds.
Let’s create our first Vue.js enabled Sitecore JSS app:
- Run jss create sitecore-jss-getting-started-vuejs vue to create a Sitecore JSS configured vue.js app.
As can been seen in the screenshot above we can easily go into the sitecore-jss-getting-started-vuejs directory and run the following command to startup the Vue.js app.
- jss start (to start the Vue.js app on localhost port 3000)
And that’s it, we just installed, configured our first Sitecore JSS Vue.js app that runs at the moment completely disconnected (more on modes in a following blog-post) from Sitecore.
Till next time … Sitecore JSS in Powerfull Ways …