Vuejs 2 Authentication Tutorial

Vuejs 2 Authentication Tutorial

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. 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 to get the code.

[…]

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

[…]

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

[…]

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.

[…]

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

[…]

It will display these items on the web page like so:

Vue.js 2 uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.

You can also decide to use JSX. JSX is the combination of HTML and JavaScript code in the same file. The browser is not meant to understand it. It must first be transpiled into standard JavaScript before the browser can understand. An example of JSX usage in Vuejs is:

Now, by default, Vue doesn't support JSX, but with the help of babel-plugin-transform-vue-jsx we can use JSX with Vue. Oh, the ecosystem should be thanked for this great tool. Whoop! Whoop!

With Vue 2, you can use the render function to create a reactive element. And you can use JSX in it like so:

Can you see the power of JSX manifesting itself in Vue? Awesome, you can check out more information on JSX in Vue here.

[…]

In the early days of Vuejs, there was no particular recommended tool or common way to set up a Vuejs app. However, there is a tool now for scaffolding your Vuejs apps. It's called the Vuejs CLI tool. It's being maintained by the Vuejs team.

[…]