What is vue.js and How it works? An Overview and Its Use Cases

History & Origin of vue.js

Vue. js was created originally by a single person, Evan You, a former Google engineer who used to work on Angular. js and later on the Meteor framework. After experimenting with a reactivity system that he thought was better than the one used in Angular.

Vue.js was created originally by a single person, Evan You, a former Google engineer who used to work on Angular.js and later on the Meteor framework. After experimenting with a reactivity system that he thought was better than the one used in Angular.js, he decided to publish his first results in July 2013. Five years later, Vue.js is the third project on Github in number of stars and Evan holds one conference after the other around the world.

Development team

The development of Vue and its ecosystem is guided by an international team of about thirty voluntary members. The team is spread all over the world, which helped to make the framework popular worldwide. Thus it is easy to have support no matter your timezone.

What is vue.js?

Vue. js is a progressive framework for JavaScript used to build web interfaces and one-page applications. Not just for web interfaces, Vue. js is also used both for desktop and mobile app development with Electron framework.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

How Vue.js works aka Vue.js architecture?

What is architecture of VueJS?

The name of the framework – Vue – is the same phonetically in English as view, and it corresponds to the traditional Model-View-Controller (MVC) architecture. Simply put, view is a UI of an application/website, and the core library of Vue. js focuses the view layer by default.
In its current form, Vue.js, developed by Evan You on a full-time basis, benefited by contributions from community members, and funded mainly by Patreon. Without the financial support of enterprises like Facebook (React) and Google (Angular), Vue still has achieved wide adoption on Github.

Community-Wide Standards for Predictability

So this begs the question, what kind of standards exist for the Vue.js community at large? I’d say that there are 4 sources of standards available.

  1. The Vue.js style guide
  2. The scaffolding generated by the Vue CLI
  3. the official Vue.js libraries (found under Ecosystem > Official Projects on the Vue.js website)
  4. and more loosely, the most popular component frameworks like Vuetify or Quasar

While some of these are more officially meant to be standards over others, I think they all provide the opportunity to have some common patterns between projects and developers resulting in more predictable codebases.

Official Libraries and Component Libraries

Let’s start by talking about the standardization that official libraries and popular component libraries bring. While the primary purpose of such libraries is to bring functionality to the table, a side affect of this is that shared standards are adopted. If you use Vue Router, for instance, you’re not only benefiting from the functionality of the package itself, but you end up implementing routes in one project much the same way as you implement them in another project and much the same way as Vue.js developers all over the world implement them.

The Vuex library in fact embraces and touts this fact as a top feature calling itself a “state management pattern + library”.

This may seem obvious, but there is a point to be made. If there is an existing popular or recommended solution for a problem in Vue.js (and even more so if it’s an official solution), I would think long and hard before using something else. I’m just as happy as the next guy, DIYing my own components, stores, etc but often times it really pays off in the long run to use the tried and true solution not just because of the functionality, test coverage, and documentation they offer but also because of the standardization they bring. (And in the world of JavaScript can’t we all just use a bit more standardization)

How does VueJS work?

VueJS focuses on the view part of your application. To do so, the framework is partly inspired by the MVVM architecture pattern. VueJS will link your DOM, the view part, with your view instance, the Model-View part. These two parts are linked by the data-binding system.

How VueJS is structured?

A Vue application consists of a root Vue instance created with new Vue or createApp function(s), optionally organized into a tree of nested, reusable components. Creating a new Vue instance generally means an instruction for the Vue application to render a component, generally, it is the App component.08-Mar-2021
Creating a new Vue instance generally means an instruction for the Vue application to render a component, generally, it is the App component. It doesn’t mean that our application will consist of a single app component but the App component will be the root component consisting of other components as child components.
Creating Vue instance in Version 2
  1. var vm = new Vue({
  2.    // options  
  3. })
Here variable vm is a short notation for ViewModel. There are various ways in which we can pass options while creating a Vue instance so that we can have the desired behavior of our application. Referring to Vue’s official site, Vue was inspired by the MVVM pattern.

What is MVVM?

Model–View–ViewModel (MVVM) is a software architectural pattern that facilitates the separation of the development of the graphical user interface (the view) – be it via a markup language or GUI code – from the development of the business logic or back-end logic (the model) so that the view is not dependent on any specific model platform. The view model of MVVM is a value converter, meaning the view model is responsible for exposing (converting) the data objects from the model in such a way that objects are easily managed and presented. Source: Wikipedia
Creating Vue instance in Version 3
  1. const app = Vue.createApp({
  2.    /* options */
  3. })
As we are already aware that to create a Vue instance in Vue 3 we use the function createApp, where we can register “globals” that can be used by the rest of the components in our application.

What are components in Vue.js?

A component is not generally a Vue instance but components are reusable Vue instances to which we can provide names. Generally, the components are used inside the root component of the application.
Components are characterized with template and logic with data flowing from the logic to the template and events emitted from the template to the logic.
Let’s have a look at the root component of our application so that we can have an idea of how the application is mounted and how the component actually looks like.
The component in the image above is known as the Single File component. A single file component consists of 3 sections first is the “Template” section which contains the HTML that will be rendered when our component gets mounted. Second, is the “script” section that JavaScript codes such as the variables and the events, and the third section “style” has the styles for the component. So we can have our components’ HTML, CSS, and JavaScript code live in a single file with a .vue file extension.
The component passed into the createApp function is used as the root component of our application and it is used for rendering while mounting the application. If we want to separate our CSS and Javascript code Vue also supports it.

What are local and global components?

A local component is a component that is available where it is created or where it is imported in another context. The single-file component that we have seen above is an example of the local component.
Vue also provides us functionality to create global components that can be used anywhere in our application without the requirement to import/export the component.
Example of creating a global component referred from the official site,
  1. // javascript code  
  2. const app = Vue.createApp({})
  3. app.component(‘component-a’, {
  4.   /* … */
  5. })
  6. app.component(‘component-b’, {
  7.   /* … */
  8. })
  9. app.component(‘component-c’, {
  10.   /* … */
  11. })
  12. app.mount(‘#app’)
  13. // HTML code  
  14. <div id=“app”>
  15.   <component-a></component-a>
  16.   <component-b></component-b>
  17.   <component-c></component-c>
  18. </div>
One of the main disadvantages of globally registering components, if you’re using a build system like Webpack, globally registering all components, means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download.
The solution for not including unnecessary javascript for your users is to define the components as plain javascript objects. This would help us as locally registered components are not also available in subcomponents.

Use case of vue.js

Vue. js is a progressive framework for JavaScript used to build web interfaces and one-page applications. Not just for web interfaces, Vue. js is also used both for desktop and mobile app development with Electron framework.

5 practical use cases of Vue. js
  1. Navigation menu. Let’s build a simple navigation bar. …
  2. Built-in editor. In the previous example, our model had only a couple of predefined values. …
  3. Order form. This example shows the list of services and the total cost of the selected ones. …
  4. Instant search. …
  5. Switchable grid.

feature and advantage of using vue js

Advantages of Vue. js
  • Simplicity. The basic idea behind the development of Vue. …
  • Integration. Developers can integrate Vue. …
  • User-Friendly. According to various experts, Vue. …
  • Customization. Vue. …
  • Few Restrictions. The design of Vue. …
  • Good Documentation. …
  • Support. …
  • Lack of Support for Large Projects.

Top 5 Advantages of Vue. js

  • Easy to Learn. Vue. …
  • Progressiveness. The framework is correctly defined as progressive, which means that it is incrementally adoptable; it gradually introduces additional markup to the HTML code. …
  • Community and Support. …
  • Best of Both Worlds. …
  • Model-View-ViewModel (MVVM) Architecture.
What are the features of Vue JS?

Following are the features available with VueJS.

  • Virtual DOM. VueJS makes the use of virtual DOM, which is also used by other frameworks such as React, Ember, etc. …
  • Data Binding. …
  • Components. …
  • Event Handling. …
  • Animation/Transition. …
  • Computed Properties. …
  • Templates. …
  • Directives.
What are the advantages and disadvantages of Vue JS?
Here are the reasons for that.
  • Small Size. The size of a JavaScript framework plays an important role in its success and Vue is just 20 KB in size. …
  • Simple. The simplicity of Vue. …
  • Documentation. The detailed documentation of Vue. …
  • Integration. …
  • Flexibility. …
  • Customization. …
  • Lack of Support. …
  • Language Barriers.

Best Alternative of vue js

Top Alternatives to Vue. js
  • React. Lots of people use React as the V in MVC. …
  • jQuery. jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. …
  • Bootstrap. …
  • Angular 2. …
  • AngularJS. …
  • Svelte. …
  • jQuery UI. …
  • Backbone.

Best Resources, Tutorials and Guide for vue js

Anyway, without wasting any more of your time, here is my list of best courses to learn Vue.js in 2021:
  1. Vue JS 2 — The Complete Guide [Udemy Best Course] …
  2. Vue JS Essentials with Vuex and Vue Router [Udemy] …
  3. Vue. …
  4. Vue. …
  5. Hands-on Vue. …
  6. Nuxt. …
  7. Complete Vue Developer in 2021 (w/ Vuex, Composition API, Router)

10+ Best Vue JS Tutorials for Beginners — Learn Vue JS Online

free video tutorial of vue js

Interview Questions and Answer for Vue js


Vue js is progressive javascript script used to create dynamic user interfaces.Vue js is very easy to learn.In order to work with Vue js you just need to add few dynamic features to a website.You don’t need to install any thing to use Vue js just need add Vue js library in your project.


Vue js comes with following features

  • Templates
  • Reactivity
  • Components
  • Transitions
  • Routing
The Life cycle of each Vue instance goes through a series of initialization steps when it is created.
– for example, it needs to set up data observation, compile the template, and create the necessary data bindings. Along the way, it will also invoke some lifecycle hooks, which give us the opportunity to execute custom logic. For example, the created hook is called after the instance is created:

new Vue({
  data: {
    a: 1
  created: function () {
    // `this` points to the vm instance
    console.log('a is: ' + this.a)
// => "a is: 1"

There are also other hooks which will be called at different stages of the instance’s lifecycle, for example compiled, ready and destroyed. All lifecycle hooks are called with their this context pointing to the Vue instance invoking it. Some users may have been wondering where the concept of “controllers” lives in the Vue.js world, and the answer is: there are no controllers in Vue.js. Your custom logic for a component would be split among these lifecycle hooks.

Lifecycle Diagram

Below diagram shows complete life cycle of Vue Instance

Source: https://v1.vuejs.org/guide/instance.html#Instance-Lifecycle

Also, Read React js Interview questions

You can create Vue instance with the Vue function:

var vm = new Vue({
  // options

In one-way data flow the view(UI) part of application does not updates automatically when data Model is change we need to write some custom code to make it updated every time a data model is changed.In Vue js v-bind is used for one-way data flow or binding.

In two-way data binding the view(UI) part of application automatically updates when data Model is changed.
In Vue.js v-model directive is used for two way data binding.

v-model directive is used to create Two-Way Bindings in Vue js.In Two-Way Bindings data or model is bind with DOM and Dom is binded back to model.In below example you can see how Two-Way Bindings is implemented.

<div id="app">
  <input v-model="message">
<script type="text/javascript">
  var message = 'Vue.js is rad';
  new Vue({ el: '#app', data: { message } });
In Vue js filters are used to transform the output that are going to rendered on browser.
A Vue.js filter is essentially a function that takes a value, processes it, and then returns the processed value. In the markup it is denoted by a single pipe (|) and can be followed by one or more arguments:

<element directive="expression | filterId [args...]"></element>

In Vue 2.0, there are no built-in filters are availables, however you are free to create your own filters.

Vue.filter() method is used to create and register a custom filter in Vue js. Vue.filter() method takes two parameters a filterId that is usnique name to filter that you going to create and a filter function that takes a value as the argument and returns the transformed value.

Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
Vue Components are one of most powerful features of Vue js.In Vue components are custom elements that help you extend basic HTML elements to encapsulate reusable code.
Following is the way to register a Vue component inside other component

export default {
  el: '#your-element'
  components: {

The concept of directive in Vue js is drastically simpler than that in Angular. Vue.js directives provides a way to extend HTML with new attributes and tags. Vue.js has a set of built-in directives which offers extended functionality to your applications.You can also write your custom directives in Vue.js .Below are list of commonly used directives in Vue.js

  • v-show
  • v-if
  • v-model
  • v-else
  • v-on

In Vue js following types of directives are available

  • General Directives
  • Literal Directives
  • Empty Directives
  • Custom Directives
VUE-resource is a plugin for vue.js that provides services for making web requests and handle responses using a XMLHttpRequest or JSONP
You can install it via yarn or NPM.

$ yarn add vue-resource
$ npm install vue-resource
best courses and insitute for learning for vue js
8 Best Vue. js Online Courses for Beginners in 2021
  1. Vue JS 2 — The Complete Guide [Udemy Best Course] …
  2. Vue JS Essentials with Vuex and Vue Router [Udemy] …
  3. Vue. …
  4. Vue. …
  5. Hands-on Vue. …
  6. Nuxt. …
  7. Complete Vue Developer in 2021 (w/ Vuex, Composition API, Router) …
  8. Fullstack Vue 3 by NewLine.


Rajesh Kumar
Follow me
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x