• 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.
• Vue is better than Angular and React

If you’d like to learn more about Vue before diving in, we created a video walking through the core principles and a sample project.

If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the Comparison with Other Frameworks.

The easiest way to try out Vue.js is using the Hello World example. Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can create an index.html file and include Vue with:

  <!-- development version, includes helpful console warnings -->
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>

  <!-- production version, optimized for size and speed -->
 <script src="https://cdn.jsdelivr.net/npm/vue"> </script>

The Installation page provides more options of installing Vue. Note: We do not recommend that beginners start with vue-cli, especially if you are not yet familiar with Node.js-based build tools.

If you prefer something more interactive, you can also check out this tutorial series on Scrimba, which gives you a mix of screencast and code playground that you can pause and play around with anytime.

At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:

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

 var app = new Vue({
  el: '#app',
  data: {
    message:  'Hello Vue!'
  }
})     

We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive. How do we know? Open your browser’s JavaScript console (right now, on this page) and set app.message to a different value. You should see the rendered example above update accordingly.

Note that we no longer have to interact with the HTML directly. A Vue app attaches itself to a single DOM element (#app in our case) then fully controls it. The HTML is our entry point, but everything else happens within the newly created Vue instance.

The component system is another important concept in Vue, because it’s an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components:

In Vue, a component is essentially a Vue instance with pre-defined options. Registering a component in Vue is straightforward:

Now you can compose it in another component’s template:

            <ol>
   <!-- Create an instance of the todo-item component -->
     <todo-item></todo-item>
  </ol>

We’ve briefly introduced the most basic features of Vue.js core - the rest of this guide will cover them and other advanced features with much finer details, so make sure to read through it all!