Using VueJs in Sitecore
Update July 2019
I've had a lot of questions about this so have written a follow up to this post you can find here: http://www.daveleigh.co.uk/using-vuejs-in-sitecore-and-asp-net-mvc-razor-pages/
Background
We have a very large, (and now pretty old!) enterprise web application utilizing Sitecore MVC and Angular 1.
Over the years Angular has worked well for us in some areas but has shown weaknesses in others. Some of the side effects from it's 2 way databinding, it's global state management and its over complicated digest system are just a few headaches we've head. This leads to the codebase being relatively complicated for new team members. Working on a team which adds new developers frequently Angular works but it could be better.
Caveat to the above, using a combination of Typescript with Angular has really helped us, and abstracting as much away from the angular layer as possible also helps simplify things
VueJs.
VueJs has a fantastic feel to it. it is an easy to pick up, intuitive component based Javascript framework. It feels very much like Angular to use, it's syntax is very similar but overall Vue is much less opinionated. It has improved many of the pain points that I found problematic in Angular and has also introduced concepts seen in React such as the virtual DOM. In terms of performance it is also much better (Angular suffers from an incurable performance issue, as the page gets larger and larger it quickly becomes slower and slower.)
Vue enforces a one way data flow between components meaning there is only one source of truth and global state is managed via a Redux type pattern - Vuex.
Why not Angular 2+?
I'm sure Angular 2 is also a good option but it's something I haven't really focussed any time on. However as a team we are also exploring Angular 2+.
What about React?
Using React with sitecore is certainly doable. The main complexity arises when you need to solve the issue of combining JSX and sitecore field renderers.
There are a few blog posts which provide some answers... and of course you could also use JSS.
https://sitecoreblog.alexshyba.com/sitecore-and-react-how-hard-can-it-be/
http://sitecorepro.blogspot.com/2017/08/sitecore-and-react-simple-integration.html
https://www.sitecorenutsbolts.net/2017/07/04/Sitecore-React-Getting-Started/
What about JSS
If you can use JSS it is certainly be worth exploring. It will, in Sitecore 9.1 come out of beta and looks fantastic.
However there are many scenarios where you might not want to use JSS and ours was one of them.
This isn't a JSS post, if you want more info about JSS - http://jss.sitecore.net.
Integrating Vuejs into a Sitecore solution
A caveat.. I've used Vue many times before but never at enterprise scale so this post really documents a prototyping effort.
These are the main problems I wanted to solve:
- Installing Vue into existing Sitecore solution and setting up build.
- Using Vue in Sitecore controller renderings (razor files).
- Rendering Sitecore field data into Vue components with experience editor support.
- Communication between different Vue components in different renderings.
Installing and building Vue
This is pretty straightforward.
1. create package.json
yarn init
2. Install the following dependencies
yarn add vue
yarn add webpack webpack-cli --dev
yarn add vue-loader vue-template-compiler vue-style-loader css-loader --dev
yarn add @babel/core @babel/plugin-syntax-dynamic-import @babel/preset-env babel-loader cross-env css-loader --dev
3. Configure webpack and babel
The way I've always built my Vue applications is via webpack. Below is my basic dev config. Note it does not include any production build steps (minification, bundling etc etc) which are essential so don't forget those.
'use strict'
const webpack = require('webpack')
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
mode: 'development',
entry: [
'./vue/app.js'
],
output: {
filename: 'main.js',
path: path.resolve('./vue-build')
},
resolve: {
alias: {
'vue