VueJS

It's becoming more and more critical in recent months that I get up to speed with a decent JavaScript framework that supports Single Page Applications. I've built a few simple SPA's before one without a framework, and the others using Backbone. Backbone is getting a bit dated now, and I need to build an SPA that is considerably more complicated than those I've made before.

After a lot of looking around I've settled on the Vue2 framework which is similar to React but has a simpler learning curve (it's practically as simple as jQuery to get started with by just including the script and writing code, or the next step, building with the simple template) while also scaling very well - in fact in virtually all tests it's shown to be faster and more scalable than React. Another popular option is AngularJS which shares a lot of similarities with Vue - both React and Angular have served as strong inspiration for the development of Vue. As is the case for React, Angular has a steep learning curve which is one of the main reasons for me to prefer Vue - I like the idea of an efficient minimalist system that is very easy to get started with and yet also very scalable. Angular is also very "opinionated" which means that it dictates a lot about the way you should structure you're application. Vue is much more flexible, but also offers the Webpack template if you want an entire tool-chain and structure predefined for you. Angular2 is much more efficient, but Vue still beats it, and in terms of size, Vue's 23KB is hard to beat (actually it is beatable though - RiotJS is only 10KB, but I feel that the massive efficiency gains of Vue are worth the extra few KB).

General

The general idea behind Vue is to "vueify" elements by constructing a new Vue instance with the el property selecting the node(s), which similar to jQuery's $("#foo") concept.

new Vue({
	el: "#foo"
});

This is not a very useful example though, the most simple functional "Hello World!" example is:

<div id="foo">{{bar}}</div>

var app = new Vue({
	el: "#foo"
	data: {
		bar: "Hello World!"
	}
});

Here the element that the Vue instance binds to has a mustache-style template parameter specified in it called bar. The Vue instance binds to it with the #foo selector in its el property, and creates a persistent connection between the bar parameter in the element and the bar sub-property of its data property. The bar property of the view instance can be accessed or changed via the instance with app.bar and any updates to it will be immediately reflected in the HTML element.

Component model

Vue components allow this idea to be encapsulated into a re-usable package, the usual usage being to register the component with a custom element as follows:

<div id="baz">
	<foo></foo>
</div>

// Register the component with "foo" custom-elements
Vue.component('foo', {
	template: '<div>This is the Foo component!</div>'
})

// Instantiate the component by "vueifying" the element containing the custom-element
new Vue({
	el: '#baz'
})

A component is actually a sub-class of the Vue object created by internally calling the Vue.extend method which adds all the passed options to the base Vue class and returns a callable constructor function reference that's used to create new instances of the component via the new directive. Components can be further sub-classed by calling their extend method in the same way.

The Vue.component method is then used to register a component with a custom element as follows. For comvenience, the Vue.component method allows these two separate steps to be combined into one by providing the options object along with the custom-element name which is what was done in the above example.

// Create the new component as an extension of the base Vue class
var newComponent = Vue.extend({
	template: '<div>This is the Foo component!</div>'
})

// Register the component with "foo" custom-elements
Vue.component('foo', newComponent);

The VueRouter extension

The Vue Router is used for making Single Page Applications. A VueRouter instance is created containing a map of all the paths and sub-paths for the application structure and which components they link to. It provides a method for creating links that will activate a path change and provides events for performing various actions in response to these changes such as transitions.

The components that are mapped to in the routes can be either be an actual component constructor created via Vue.extend(), or just a component options object. The association of the components with custom elements is not necessary since in this context they're always applied to <router-view> custom-elements, and the instantiation of them onto the DOM is handled automatically by the router mechanism. This is the reason that Vue.extend or even just an options object is all that is needed for the router components.

If the component needs to be used or referred to elsewhere in the application then Vue.extend is needed, otherwise simply passing the options object is all that's necessary and the router will take care of all the registration and instantiation internally.

Vue-cli and Web-pack

Vue-cli is a simple CLI for scaffolding Vue.js projects from the shell using simple official or custom project templates to rapidly build working prototypes. Vue-loader (a Webpack loader for Vue) is used to convert the single-file-component syntax into a plain JavaScript module for normal execution in the browser.

The init command creates a new project from a template, and the build command rebuilds it after changes are made.

First NodeJS and the Node package manager must be installed:

apt install nodejs npm

Nodejs must then be brought up to date using their own upgrade system since the operating system package managers are usually well behind what's required by most dependencies.

sudo npm cache clean -f
sudo npm install -g n
sudo n stable
sudo ln -sf /usr/local/n/versions/node/<VERSION>/bin/node /usr/bin/node
sudo ln -sf /usr/local/n/versions/node/<VERSION>/bin/node /usr/bin/nodejs

Now vue-cli can be installed:

npm install -g vue-cli

And then a project created and run, for example:

cd /var/www
vue init webpack-simple my-project
cd my-project
npm install
npm run dev.

You can then make the src directory into a repo and begin refining your project to your own needs running npm run dev each time changes are committed, and npm build to compile the project into its minified state for production.

Notes

• It may be good to use Weex templates for cross-platform native rendering
• "Vue has a clearer separation between directives and components. Directives are meant to encapsulate DOM manipulations only, while components are self-contained units that have their own view and data logic. In Angular, there’s a lot of confusion between the two.
• Cleaning up on transitions
• Properties in routes

See also

• Awesome Vue - big list of examples and tutorials
• VueComponents.com - a lot of nice clear examples
• The Vue router
• Building large-scale apps
• Vue-Socket.io - and this tutorial, also AutobahnJS
• Simple Vuex tutorial