<commit_before>---
layout: post
title: "Vuejs 2 Authentication Tutorial"
description: Learn how to quickly build apps with Vuejs 2 and add authentication the right way.
date: 2017-04-18 8:30
category: Technical Guide, Frontend, VueJS
author:
  name: <NAME>
  url: https://twitter.com/unicodeveloper?lang=en
  avatar: https://en.gravatar.com/avatar/1097492785caf9ffeebffeb624202d8f?s=200
  mail: <EMAIL>
design:
  bg_color: "#35495E"
  image: https://cdn2.auth0.com/blog/vuejs/logo.png
tags:
- vuejs
- javascript
- authentication
- web-app
- auth0
related:
- 2016-01-04-secure-your-react-and-redux-app-with-jwt-authentication
- 2016-09-29-angular-2-authentication
- 2017-02-21-reactjs-authentication-tutorial
---

---

**TL;DR:** Vuejs is a progressive JavaScript framework for building user interfaces on the web. It was launched shortly after ReactJS and over time, lots of developers started adopting it in their daily work. In fact, with the launch of Vuejs 2.0, the adoption and usage worldwide skyrocketed. Currently, Vuejs has over 49,000 stars on [Github](https://github.com/vuejs/vue). In this tutorial, I'll show you how easy it is to build a web application with Vuejs 2 and add authentication to it. Check out the [repo](https://github.com/auth0-blog/vuejs2-authentication-tutorial) to get the code.

---

[**Vuejs**](https://vuejs.org/) was developed by [<NAME>](https://twitter.com/youyuxi), an ex-Google software engineer. Just before launching Vuejs 2.0, he started to work on Vue.js full time and as a result, Vue.js 2 is now  significantly lighter, smaller in size and faster. Currently, many popular products use **Vuejs** to build their user interfaces. Such platforms include *Laravel Spark*, *Grammarly*, *Statamic*, *Laracasts* and more. There is a comprehensive list of [projects using Vuejs on Github](https://github.com/vuejs/awesome-vue#projects-using-vuejs). Vuejs 2's [documentation](https://vuejs.org/v2/guide/) is very detailed, and there is a vibrant community of users.

## Vuejs 2, Angular 2 and React

Vuejs was inspired by AngularJS in it's early days of development, thus making some of its syntax look very similar to AngularJS, e.g `v-show`, `v-if` and `v-for`. Angular 2 came to the scene with a completely new framework in terms of API design, underlying language and many addons, which was initially disturbing for a lot of developers. Now Vuejs 2, despite being a full rewrite made its API largely compatible with Vuejs 1.0, thus making it super easy for developers to transition from Vuejs 1.0 to 2.0. Whoop! Whoop!

Vuejs 2.0 comes bundled with some major changes:

* The rendering layer is now based on a lightweight virtual-DOM implementation, [Snabbom](https://github.com/paldepind/snabbdom)
* Detection of static class names and attributes so that they are never diffed after the initial render
* Detection of sub trees without dynamic bindings and hoisting them out of the render function, which as a result leads to diff skipping on each re-render.
* It supports server-side rendering with client-side hydration. React and Angular 2 also provides server-side rendering.
* Support for JSX. The template syntax is still available for use, but you can always drop down to the virtual-DOM layer whenever you feel constrained by the use of templates.
* The template-to-virtual-DOM compiler and the runtime can be separated, so you can pre-compile templates and ship your app with only the runtime, which is less than 12kb min+gzip.

AngularJS(*Angular 1*) uses two-way binding between scopes, while Vue enforces a one-way data flow between components.

Vuejs 2 and Angular 2 are similar in a way because they both offer component-based systems.

React and Vue.js are also similar in many ways. They both:

* Utilize a virtual DOM.
* Provide composable view components.
* Have a core library & have sister libraries for handling state, routing, network requests, e.t.c.

### Enter Performance Profiling

Vue.js and React utilize virtual DOM, but Vue's virtual DOM implementation allows rendering of UI to be faster than that of React, because it involves less overhead. Let's look at some performance statistics done by the Vue.js team. Check out the [repo here](https://github.com/chrisvfritz/vue-render-performance-comparisons).

This benchmark was run 20 times with results from the best runs on a 2014 MacBook Air.

![Vuejs - React Metrics](https://cdn.auth0.com/blog/vuereact/metrics.png)
_Vue, React Metrics_

By default, React triggers a re-render of an entire component subtree when state changes. To avoid unecessary re-rendering, you have to manually implement `shouldComponentUpdate`. In Vuejs, a component’s dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render.

According to this [benchmark](http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html), Vue 2's app size is smaller than Angular 2.

## Understanding Key Concepts in Vuejs 2

**Vuejs 2** is similar to React and Angular 2 in a few ways. There are few key concepts that will help you get started easily. I'll give a basic overview of these concepts to nourish your understanding of **Vuejs**. They are:

* **Directives**
* **Components** 
* **Template/JSX**

You can decide to use *Vuejs 2* by simply invoking methods on a Vue instance or go the component-composing route.

{% highlight html %}

<div id="app">
  <p>{{ message }}</p>
</div>

{% endhighlight %}


```js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, it is this easy!'
  }
})
```

The result of the code above on the browser will be *Hello, it is this easy!*.  The value of any property in the data object within a new Vue instance will be rendered to the DOM easily. The curly braces `{{` and `}}` are used to display the property on the web page.

### Directives

It's very easy to toggle the display of items on a web page with inbuilt directives such as `v-if`, `v-show` like so:

{% highlight html %}
  <div id="app">
    <p v-if="visible()">{{ message }}</p>
  </div>
{% endhighlight %}

```js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, it is this easy!'
  },
  methods: {
    visible: function() {
      return true;
    }
  }
});
```

If for any reason, the `visible` funtion returns false, the paragraph would not be displayed on the web page. What about iterations and loops? Check out the code below

{% highlight html %}
  <div id="app">
    <ol>
      <li v-for="item in items">
        {{ item.name }}
      </li>
    </ol><commit_msg>Correct grammar<commit_after>---
layout: post
title: "Vuejs 2 Authentication Tutorial"
description: Learn how to quickly build apps with Vuejs 2 and add authentication the right way.
date: 2017-04-18 8:30
category: Technical Guide, Frontend, VueJS
author:
  name: <NAME>
  url: https://twitter.com/unicodeveloper?lang=en
  avatar: https://en.gravatar.com/avatar/1097492785caf9ffeebffeb624202d8f?s=200
  mail: <EMAIL>
design:
  bg_color: "#35495E"
  image: https://cdn2.auth0.com/blog/vuejs/logo.png
tags:
- vuejs
- javascript
- authentication
- web-app
- auth0
related:
- 2016-01-04-secure-your-react-and-redux-app-with-jwt-authentication
- 2016-09-29-angular-2-authentication
- 2017-02-21-reactjs-authentication-tutorial
---

---

**TL;DR:** Vuejs is a progressive JavaScript framework for building user interfaces on the web. It was launched shortly after ReactJS and over time, lots of developers started adopting it in their daily work. In fact, with the launch of Vuejs 2.0, the adoption and usage worldwide skyrocketed. Currently, Vuejs has over 49,000 stars on [Github](https://github.com/vuejs/vue). In this tutorial, I'll show you how easy it is to build a web application with Vuejs 2 and add authentication to it. Check out the [repo](https://github.com/auth0-blog/vuejs2-authentication-tutorial) to get the code.

---

[**Vuejs**](https://vuejs.org/) was developed by [<NAME>](https://twitter.com/youyuxi), an ex-Google software engineer. Just before launching Vuejs 2.0, he started to work on Vue.js full time and as a result, Vue.js 2 is now  significantly lighter, smaller in size and faster. Currently, many popular products use **Vuejs** to build their user interfaces. Such platforms include *Laravel Spark*, *Grammarly*, *Statamic*, *Laracasts* and more. There is a comprehensive list of [projects using Vuejs on Github](https://github.com/vuejs/awesome-vue#projects-using-vuejs). Vuejs 2's [documentation](https://vuejs.org/v2/guide/) is very detailed, and there is a vibrant community of users.

## Vuejs 2, Angular 2 and React

Vuejs was inspired by AngularJS in it's early days of development, thus making some of its syntax look very similar to AngularJS, e.g `v-show`, `v-if` and `v-for`. Angular 2 came to the scene with a completely new framework in terms of API design, underlying language and many addons, which was initially disturbing for a lot of developers. Now Vuejs 2, despite being a full rewrite made its API largely compatible with Vuejs 1.0, thus making it super easy for developers to transition from Vuejs 1.0 to 2.0. Whoop! Whoop!

Vuejs 2.0 comes bundled with some major changes:

* The rendering layer is now based on a lightweight virtual-DOM implementation, [Snabbom](https://github.com/paldepind/snabbdom)
* Detection of static class names and attributes so that they are never diffed after the initial render
* Detection of sub trees without dynamic bindings and hoisting them out of the render function, which as a result leads to diff skipping on each re-render.
* It supports server-side rendering with client-side hydration. React and Angular 2 also provides server-side rendering.
* Support for JSX. The template syntax is still available for use, but you can always drop down to the virtual-DOM layer whenever you feel constrained by the use of templates.
* The template-to-virtual-DOM compiler and the runtime can be separated, so you can pre-compile templates and ship your app with only the runtime, which is less than 12kb min+gzip.

AngularJS(*Angular 1*) uses two-way binding between scopes, while Vue enforces a one-way data flow between components.

Vuejs 2 and Angular 2 are similar in a way because they both offer component-based systems.

React and Vue.js are also similar in many ways. They both:

* Utilize a virtual DOM.
* Provide composable view components.
* Have a core library & have sister libraries for handling state, routing, network requests, e.t.c.

### Enter Performance Profiling

Vue.js and React utilize virtual DOM, but Vue's virtual DOM implementation allows rendering of UI to be faster than that of React, because it involves less overhead. Let's look at some performance statistics done by the Vue.js team. Check out the [repo here](https://github.com/chrisvfritz/vue-render-performance-comparisons).

This benchmark was run 20 times with results from the best runs on a 2014 MacBook Air.

![Vuejs - React Metrics](https://cdn.auth0.com/blog/vuereact/metrics.png)
_Vue, React Metrics_

By default, React triggers a re-render of an entire component subtree when state changes. To avoid unecessary re-rendering, you have to manually implement `shouldComponentUpdate`. In Vuejs, a component’s dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render.

According to this [benchmark](http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html), Vue 2's app size is smaller than Angular 2.

## Understanding Key Concepts in Vuejs 2

**Vuejs 2** is similar to React and Angular 2 in a few ways. There are few key concepts that will help you get started easily. I'll give a basic overview of these concepts to nourish your understanding of **Vuejs**. They are:

* **Directives**
* **Components** 
* **Template/JSX**

You can decide to use *Vuejs 2* by simply invoking methods on a Vue instance or go the component-composing route.

{% highlight html %}

<div id="app">
  <p>{{ message }}</p>
</div>

{% endhighlight %}


```js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, it is this easy!'
  }
})
```

The result of the code above on the browser will be *Hello, it is this easy!*.  The value of any property in the data object within a new Vue instance will be rendered to the DOM easily. The curly braces `{{` and `}}` are used to display the property on the web page.

### Directives

It's very easy to toggle the display of items on a web page with inbuilt directives such as `v-if`, `v-show` like so:

{% highlight html %}
  <div id="app">
    <p v-if="visible()">{{ message }}</p>
  </div>
{% endhighlight %}

```js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, it is this easy!'
  },
  methods: {
    visible: function() {
      return true;
    }
  }
});
```

If for any reason, the `visible` function returns false, the paragraph would not be displayed on the web page. What about iterations and loops? Check out the code below

{% highlight html %}
  <div id="app">
    <ol>
      <li v-for="item in items">
        {{ item.name }}
      </li>
    </ol>
{'fraction_non_alphanumeric': 0.09164953946867625, 'fraction_numerical': 0.017355560630280886, 'mean_word_length': 4.0922480620155035, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 35, 'https://': 24, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3136429', 'n_tokens_mistral': 4051, 'n_tokens_neox': 3729, 'n_words': 1772}