Getting started with Sitecore JSS & Vue.js

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:

Sitecore JavaScript Services (JSS) is a complete SDK for JavaScript developers that enables you to build full-fledged solutions using Sitecore and modern JavaScript UI libraries and frameworks.

Due to a very busy project I wasn’t able to find extra free time to start blogging about Sitecore JSS development yet, but the day has finally come to start blogging about its capabilities. But I wanted a different take from what was already out there, and probably in the upcoming weeks I will touch upon what is already out there and blogged about by others, but hopefully I’m able to bring it with a difference flavor to it. So this series of blog-posts will be about MY travels in Sitecore JSS land. From what I’ve been seeing, the Sitecore Community is 99% focussing on Sitecore JSS in combination with React.js . In this series of blog-posts I’m going to focus on Sitecore JSS development in combination with Vue.js, which is one of the supported Modern JavaScript frameworks that work well with Sitecore JSS.

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:

Install Node.js, which is a JavaScript runtime (check with node -v to see if it’s installed and to see what version is installed). By installing Node.js the Node.js Package Manager (NPM) is installed automatically
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.