Vue.Js - Reactive Components for Modern Web Interfaces

Vue.js

Did the title set you thinking, "Great, yet another JavaScript framework, as if we didn't have enough already?" I had similar feelings, until I took it out for a spin.

Technically, Vue.js is not a "framework" but a library for building reactive web interfaces. It fits in nicely with your existing code and other libraries. I first came across Vue about a year ago, but dismissed it as yet another JS framework. Recently, it made news by hitting version 1.0. I decided to give it a chance.

What does Vue offer?

In a world where Angular, Ember and React exist, what would one need Vue for? In one of my projects, I have a bunch of Handlebars templates. As the codebase grew larger, I began considering adding data-binding. I love Knockout and I use it extensively in several projects. I have also been swayed into the ReactJS fan club. However, I wanted some way to add data-binding with minimal changes to existing templates. I (re-)discovered Vue and it seemed to fit the bill.

Quick data-binding

HTML
<div id="demo">
	<p>{{message}}</p>
</div>
JS
var Post = Vue.extend({
	template: '<article>{{ content }}</article>',
	data: function () {
		return {
			content: 'Introducing Vue.js'
		}
	}
});
// register as a Vue component
Vue.component('post', Post);"}

Without changing my template, I now have reactive data-binding! No events; no need of this.setState() or ko.observable() or even data-bind attributes. It just works!
Agreed, you need to change the DOM if you need two-way binding:

<div id="demo">
	<input v-model="message" />
	<p>{{message}}</p>
</div>

Components

First, register your template as a component.

var Post = Vue.extend({
	template: '<article>{{ content }}</article>',
	data: function () {
		return {
			content: 'Introducing Vue.js'
		}
	}
});
// register as a Vue component
Vue.component("post", Post);

Then use it as a custom tag:

<post></post>

You can compose components of smaller components to build your UI.

Give Vue a chance

I have only scratched the surface of this nifty little library. It has built-in support for ES2015 modules, animations, mixins, and more. If you want to use Vue for more than just your views, there are plugins such as vue-router (for URL routing). It definitely deserves a deeper look. I recommend investing a couple of hours, going through the exceptionally well-written official guide and trying out the examples.

I am impressed at how actively the Vue project is maintained, especially since it is a personal project! In the author's own words, you will love Vue if you like:

  • Extendable Data bindings
  • API that simply makes sense
  • Plain JS object models
  • Building UI by composing components
  • Mix & matching small libraries