Vue JS is a progressive JavaScript Framework. Vue JS is a very easy and approachable framework. It is written by Evan, Who worked in Google and Meteor framework. Now Vue JS is competing with React JS and Angular JS.  like other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.

You can easily include Vue JS dependencies by CDN method to get started. Vue JS is so easy and gets easily any type of work done. 

Vue JS has 11,2,404 stars and 15,783 Forks.

Vue JS and React JS have changed the way we build web applications. We can easily use Vue JS and React JS in electron framework to build fast and progressive desktop applications. Let’s do a simple example:

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

You just have to include Vue JS file in order to preview the changes.

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

This will print `Hello Vue` on the screen.

We have just made our first Vue application! This looks truly like rendering a string format, however, Vue has completed a great deal of work in the engine. The information and the DOM are presently connected, and everything is currently receptive. How would we know? Open your program’s JavaScript support (at the present time, on this page) and set app.message to an alternate esteem. You should see the rendered case above refresh in like manner.

We can also give attributes to an element by using Vue JS:

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

This will print a div with text and when you hover it, it will generate a title to div.

So this is a simple example of Vue JS. Let’s get into more deeper.

A Note On Components

Components are like building parts of applications, In every app, everything should be well defined. Components let us split our app into tiny things so that everything can be customized able. According to a new working standard, every component should be less than 100 lines.

A Note On Routing

Vue JS Offers great routing level. Vue JS has it’s own Routing library which is called Vue Router. Vue Router is easy to implement and easy to customize. We can also use module router feature in Vue JS.

A Note On Store/State

Just like Routing, Vue JS has great support on Store or State. Vue JS has great store feature called VueX. We can easily manage our store in Vue JS by using VueX and it is simpler than React Redux and easily to deploy.