Introduction to Vue.js

What’s Vue.js? 

Vue.js is open source and lightweight javascript library for building interactive single page application and user-friendly web applications. When integrated with other libraries it also becomes a “framework”. The word “Vue” is pronounced as “View”. Vue was created by Evan You.

Why use Vue.js? 

Now the question arises why to use Vue.js when there are so many javascript libraries and frameworks available in the market like React.js and Angular which has great community support. This article here is not to convince you towards using the Vue.js, but to know the awesomeness Vue.js has that could help you to start building your application right away with saving the deadline. Let’s check out the things that can make you think why to use Vue.js

Documentation: Unlike other JS frameworks, Vue.js has a pretty easy and beautiful documented website that has paced the learning curve among the developer community. Unlike Angular, there is no need to learn Typescript, you could start with your basic knowledge of HTML and JavaScript.

No overhead of Installation: Vue.js requires just a single script to start building your amazing application.

Tiny size: Vue.js script has a size of 20KB that makes it to perform unbelievably faster than the other JS frameworks and libraries.

Large Scaling: Vue.js can not only be used to build single page application but to make large complex web application because of its reusable component/template-based structure. Also, reusable templates can also be integrated into the existing web application.

Installation 

Adding the script in the file.

//For learning purpose only 

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


Using NPM Npm approach is for building large applications. 

> npm install -g @vue/cli 

# OR 

> yarn global add @vue/cli 


# To check have vue with the right version installed on your machine 

> vue --version vue --versionssss > vue create hello-world 

> npm run serve 

Vue Directives 

Here are some of the basic directives of Vue.js.

For Condition Rendering: v-if, v-else-if, v-else 

e.g. <p v-if="isWrong">{{ correctAnswer }}</p> 

<p v-else-if="isCorrect">...</p> <p v-else>...</p>

Two way day binding: v-model 

<input v-model="name" > 

For iterating through HTML elements: <li v-for="item in items" :key="item.id"> {{ item }} </li> 

Binding of data with the HTML elements: 

<a v-bind:href="url">...</a> 

<button :disabled="isButtonDisabled”>... 

<div :class="{ active: isActive }">... 

<div :style="{ color: activeColor }"> 

Events / Actions: 

<button v-on:click="addToCart"> 

Add ons (Libraries) in Vue.js

Vuex

Vuex is the state management library for Vue.js application. Vuex is similar to Flux, another state management library for React.js. Imagine if you are building the complex web application, how you would be managing the data sharing between the components. The best way would be storing the required data shared between the components onto the centralized location, so all the components would be accessing the data from Vuex state using the getter methods and committing back the modified data using the mutations.

Installation: 

adding script <script src=”/path/to/vuex.js”></script

NPM > npm install vuex –save

Yarn > yarn add vuex

Each Vue component contains data function that makes it reactive. As the application grows, it becomes hard to manage the sharing of data between components or passing of data into “Family Tree” of components as each component would be having its own version of state. To resolve this, we can consolidate the data into one global location. Vuex would be providing us a “single source of truth”. So if one of the components updates the state. All the components that are listening to the same state will get the updated values reactively.

Initializing the Vuex into the application: 

//In store.js import Vue from 'vue' import Vuex from 'vuex' 

Vue.use(Vuex) 

export const store = new Vuex.Store({ 

state: { 

role: '' } }) //In main.js import { store } from ‘./store’ import Header from './components/Header' import Footer from './components/Footer' 

const app = new Vue({ 

el: '#app', store, //this will accessible by all child components. components: { Header, Footer } }) 

Mutations: There is the only way to update the state by committing the mutation. 

export const store = new Vuex.Store({ 

state: { 

role: 'admin' } mutations: { 

udpateRole (state, role) { 

state.role = role } } }) 

Getters: To access the state from the store, Vuex has the getter methods. Getter method accepts state instance 

export const store = new Vuex.Store({ 

state: { 

role: 'admin' } getters: { 

role: state => state.role } }) 

Actions: Actions are similar to the mutations the differences are here that actions commit mutations and can perform asynchronous operations. 

const store = new Vuex.Store({ 

state: { 

role: 'admin' }, actions: { 

increment (context) { 

context.commit(‘student') } } })

Vuetify Vuetify is the component based on the library for UI specify designed for vue.js application based on Google Material Design. You can explore at- https://vuetifyjs.com/en/ getting-started/quick-start

Vue DevTools 

Vue js DevTools is the best tool as the browser extension for the debugging purposes of Vue.js applications.

Tabs in Vue DevTools 

Components: Components tab is divided into two views, left part of the view shows the hierarchy of the components and the right side shows the data that component has.

Vuex: Vuex tab shows all the state management variables. You can add new properties on existing objects and changes the state of the existing variable.

Routes: Unlike the components tab, the routes tab is also divided into two views. Left view shows the history of routes and on clicking on one of the routes shows the details of a route in the right view.

Performance: Performance tab is composed of two views: “Frames Per Second” and “Component Render“. “Frames Per Second” tabs show live feed chart of your application. It can help you determine certain actions and components that slow downs the performance of your application. On the “Component Render“, shows detailed time-to-run statistics for components lifecycle methods.

When to use Vue.js? 

Vue can be used for many different types of applications. When it comes to adding complex logic to the existing applications then Vue.js comes into the picture. It can provide you the perfect solutions for your applications:

Dynamic high-performance applications: 

Vue.js is a good choice for dynamic applications, thanks to virtual DOM it offers higher performance which can be beneficial for complex apps.

Single page apps: 

Vue.js uses virtual DOM that allows changing of content quickly without reloading the page, which makes it perfect for SPAs.

Conclusion: 

At last, looking towards the low learning curve and no-overhead of installation and also with about 658,000 downloads per month, Vue.js is giving front-end developers an option to develop awesome and user-friendly applications.