3 reasons to use Vue.js in your next web project

Vue.js is surprisingly easy to start with, offers plenty of essential features out of the box, and provides very good performance. Read for more facts, arguments, code snippets and benchmarks.

It's hard to choose a JavaScript framework – because there's too many of them, and because the differences are not immediately obvious. If you agree that productivity ("how fast can I get things done") and performance ("how fast will my website be") are the most important criteria, let me show why Vue.js is a very solid framework for building websites and single-page applications.

1) A component library based on HTML, CSS & JS makes it simple to get started

The first thing you need to do is to set up your environment. Vue.js is really easy to start with and doesn't require a build tool such as Webpack. All you have to do is making a single import in a script tag:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

First, we're going to build a basic component just to show you how your template and your JavaScript code are related.

How to build your first component

You have two ways of building a component. Let's start with the simplest one ever which is only a combination of JavaScript and HTML in a really minimalist way:

app.js

var app = new Vue({
 el: '#app',
 data: {
   name: 'James'
 }
})

app.html

<div id="app">
 Hello <input type="text" value={{ name }} />
</div>

app.css

#app input {
  padding: 10px;
  color: #121212;
  font-size: 12px;
}

That’s pretty much everything you need to start making some good stuff.

As you can see, we keep the correspondence between the template and the JavaScript thanks to the id app and we just provided data so you can bind it dynamically in your HTML.

How to link data to their template

Vue.js has a two-way binding system by design, which means that you can alter data from the JavaScript or from the template. Let’s consider our code snippet above: if you alter the input text, it will automatically update your variable on the JavaScript side. On the contrary, if you change the data on the JavaScript file, it will rerender your template with the new value in the input.

A shared approach with Web Components

Vue.js relies a lot on declarative models, making your code easy to read and easy to understand at first sight.

It’s also the closest you can get to the Web Component Custom Element spec without the downside of heavy polyfill and poor performance for legacy browsers that you can find in true Web Component implementation such as Polymer.

2) The essential features like routing and data management are covered by official libraries

Vue.js includes the core module that allows you to build components as we discovered, but it also includes a set of opinionated libraries built by the Vue.js team itself such as vue-router for the routing part, Vuex to manage your data, vue-cli to bootstrap a new project.

How to build a router

A major point in any Web application is the routing system and for that purpose, you can rely on vue-router. You can declare all your routes in a concise way and exploit dynamic routing parameters in your component with only a few lines of code.

import Page from './components/page';

export default new VueRouter({
  [
    { path: '/page/:uid', component: Page }
  ]
});

How to communicate between components

One other fundamental aspect in any complex web app is the communication between components and for that matter, how to manage your data.

Vuex is a module which is inspired by Redux and the Elm architecture. It provides a very declarative way to handle actions in components and dispatch the data to any component.

const store = new Vuex.Store({
  state: {
    doc: null
  },
  mutations: {
    setDocument(state, doc) {
      state.doc = doc
    }
  },
  actions: {
    async queryDocument({ commit }, { customType, uid }) {
      commit('setDocument', await Prismic.getByUID(customType, uid))
    }
  }
})

How to build a component mixing Vuex and vue-router

Now it’s time to make it work all together in a simple component:

var app = new Vue({
 el: '#page,
 beforeRouteUpdate(to, from, next) {
  store.dispatch('queryDocument', { customType: 'homepage', uid: to.params.uid })
  .then(next)
})

beforeRouteUpdate is just a component hook to indicate when your code should be executed when switching route.

Use vue-cli to quickly bootstrap a project

vue-cli is a command line tool that helps you bootstrapping a simple project with a build tool already preconfigured.

It can be really useful to build a component in a file with the extension .vue which allows you to put the HTML, CSS and JavaScript inside to scope your component correctly.

It’s also useful because you get fine helpers like babel to handle new syntax in JS like async/await.

You can find more information on the official Vue.js docs to help you get started.

3) Fast rendering ensured by virtual DOM and minimal load time

30KB!

Vue.js is only ~30 KB gzipped with the core module, the router and Vuex.

A minimal footprint offers short load time, meaning higher speed for users and better ranking on the speed criterium for Google crawler.

Virtual DOM!

Vue.js also took inspiration in ReactJS by implementing Virtual DOM under the hood since the version 2.0. Virtual DOM is basically a way to generate a version of the DOM in-memory each time you change a state and compare it to the actual DOM, so you can update only the part that needs to be updated instead of re-rendering everything.

Benchmarking

Vue.js offers some really good overall performance as you can see on the following benchmarks:

Duration in milliseconds ± standard deviation (Slowdown = Duration)

Memory allocation in MB

(Source: third-party benchmarks by Stefan Krause)

How to manage content in Vue.js projects

Here at Prismic we consider Vue.js as a really approachable way of building complex web applications that can be easily integrated with external tools through an API.

if you’re interested in integrating a CMS into your Vue.js projects – so that non-tech authors and editors can change website content in a familiar environment – have a look at full documentation on Vue.js, as well as a plugin and a starter project.