What is Vue.js?
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.
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.
Getting Started
Installation
The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required.
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@2/dist/vue.js"></script>
or:
<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></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.
Declarative Rendering
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!'
}
})
{{ message }}
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.
In addition to text interpolation, we can also bind element attributes like this:
<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()
}
})
Hover your mouse over me for a few seconds to see my dynamically bound title!
Here we are encountering something new. The v-bind attribute you are seeing is called a directive. Directives are prefixed with v- to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here, it is basically saying “keep this element’s title attribute up-to-date with the message property on the Vue instance.”
If you open up your JavaScript console again and enter app2.message = 'some new message', you’ll once again see that the bound HTML - in this case the title attribute - has been updated.
Conditionals and Loops
It’s easy to toggle the presence of an element, too:
<div id="app-3">
<span v-if="seen">Now you see me</span>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
Now you see me
Go ahead and enter app3.seen = false in the console. You should see the message disappear.
This example demonstrates that we can bind data to not only text and attributes, but also the structure of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply transition effects when elements are inserted/updated/removed by Vue.
There are quite a few other directives, each with its own special functionality. For example, the v-for directive can be used for displaying a list of items using the data from an Array:
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
- {{ todo.text }}
In the console, enter app4.todos.push({ text: 'New item' }). You should see a new item appended to the list.
Handling User Input
To let users interact with your app, we can use the v-on directive to attach event listeners that invoke methods on our Vue instances:
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
{{ message }}
Note that in this method we update the state of our app without touching the DOM - all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic.
Vue also provides the v-model directive that makes two-way binding between form input and app state a breeze:
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
{{ message }}
Composing with Components
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:
// Define a new component called todo-item
Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})var app = new Vue(...)
Now you can compose it in another component’s template:
<ol>
<!-- Create an instance of the todo-item component -->
<todo-item></todo-item>
</ol>
But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components. Let’s modify the component definition to make it accept a prop:
Vue.component('todo-item', {
// The todo-item component now accepts a
// "prop", which is like a custom attribute.
// This prop is called todo.
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
Now we can pass the todo into each repeated component using v-bind:
<div id="app-7">
<ol>
<!--
Now we provide each todo-item with the todo object
it's representing, so that its content can be dynamic.
We also need to provide each component with a "key",
which will be explained later.
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
(Video) Vue JS Crash CourseThis is a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our <todo-item> component with more complex template and logic without affecting the parent app.
In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components later in the guide, but here’s an (imaginary) example of what an app’s template might look like with components:
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
Relation to Custom Elements
You may have noticed that Vue components are very similar to Custom Elements, which are part of the Web Components Spec. That’s because Vue’s component syntax is loosely modeled after the spec. For example, Vue components implement the Slot API and the is special attribute. However, there are a few key differences:
The Web Components Spec has been finalized, but is not natively implemented in every browser. Safari 10.1+, Chrome 54+ and Firefox 63+ natively support web components. In comparison, Vue components don’t require any polyfills and work consistently in all supported browsers (IE9 and above). When needed, Vue components can also be wrapped inside a native custom element.
Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and build tool integrations.
Although Vue doesn’t use custom elements internally, it has great interoperability when it comes to consuming or distributing as custom elements. Vue CLI also supports building Vue components that register themselves as native custom elements.
Ready for More?
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!
Video by Vue Mastery. Watch Vue Mastery’s free Intro to Vue course.
← Installation The Vue Instance →
##company## — ##description##
' }); Caught a mistake or want to contribute to the documentation? Edit this on GitHub! Deployed on Netlify .
FAQs
How difficult is it to learn Vue js? ›
Easy to learn – Vue. js is intuitive, making it easy to understand and great for beginners thanks to its documentation. All you need to know are the basics of HTML and JavaScript. Easy to scale - The application is easily scalable and can be used to perform a number of local tasks in large projects.
How many days it will take to learn Vue js? ›Learn Vue js will take a complete beginner one to two weeks. However, a more experienced programmer might be able to learn the basic concepts within a few hours. It's recommended that people are fluent in Javascript before attempting to learn Vue js. Learning Javascript will take between six to nine months.
Is Vue js beginner friendly? ›VueJS is known for being a progressive framework. That means whether you are a complete beginner to this JavaScript framework or an experienced developer who is simply transitioning, VueJS adapts to your needs.
Is Vue more difficult than React? ›Vue, on the other hand, is a little simpler than React, so it may be easier to learn for new programmers. React, on the other hand, has a steeper learning curve and requires more practice before you can truly master it. Despite this, developers generally regard it as an excellent tool that is more flexible than Vue.
Is Vue js full-stack? ›It is a full-stack solution for building web-based applications that use MongoDB as data storage, Express. js as the backend framework (which is built on top of Node. js), Vue. js as the JavaScript framework for the frontend, and Node.
Is Vue easier than JavaScript? ›In summary, both are quite similar in their structure, but Vue. js is slightly easier to learn as it allows HTML and JSX.
What is the best way to learn Vue? ›- Vue JS 2 — The Complete Guide (incl. ...
- VueJS 2 The Complete Guide. ...
- Learn Vue. ...
- Nuxt. ...
- React JS, Angular & Vue JS - Quickstart & Comparison. ...
- Build Amazing Web Apps: Develop Apps with Vue JS & Firebase. ...
- Vue JS Essentials with Vuex and Vue Router.
Learning Curve
Vue is simpler to use than Angular since it has built-in app templates and allows for more flexibility. Furthermore, it is easy to integrate Angular or React-based mobility solutions into the Vue platform as Vue. js was created by combining Angular and React.
Vue is faster and smaller, which contributes to better performance. When it comes to hiring developers, both have their advantages and drawbacks. Vue is easier to learn, but React is more popular, and therefore, finding hires is faster.
Is it worth learning Vue js? ›Because of its familiar templating syntax and use of components, integrating or migrating existing projects to Vue is faster and smoother. For that reason, Vue. js is great for startups but can be just as well used in large-scale applications.
Can I learn Vue without knowing JavaScript? ›
Although technically you can learn Vue. js without JavaScript, the problem will always come when you have to edit existing code or write your own, you will be completely lost.
Can you learn Vue js without knowing JavaScript? ›You should keep in mind if learning Vue js is the first framework you learning you might struggle a bit. Since Vue. js is based on Javascript it's highly recommended that you at least have a basic knowledge of Javascript, otherwise you will have a difficult time understanding how to write and execute code within Vue.
Does Facebook use Vue? ›Vue. js has already earned a significant spot among the most popular JavaScript frameworks and many well-known companies use Vue. js such as Facebook, Netflix or Adobe.
Why Vue js is not popular? ›Vue js is not popular because it's a new framework compared to React js and Angular js, and it's not used by a lot of market leaders, another reason is it has very few resources compared to the popular frameworks.
Are Vue js developers in demand? ›Many organizations are looking to hire Vue. js developers for their projects. However, since it takes software developers a while to master this framework, the demand for Vue. js experts is unquestionably high.
Is Vue front end or backend? ›The result was Vue. js, which is one of the most popular frontend frameworks in use today.
Which backend is best for Vue? ›- Laravel. ...
- Firebase. ...
- WordPress. ...
- Heroku. ...
- Serverless. ...
- Django. ...
- DigitalOcean App Platform. DigitalOcean cloud computing platform could also be a good choice to develop Vue JS backends. ...
- Rails. If you are looking for a Ruby-based server-side framework for Vue JS, you should consider using Rails.
Nintendo, UpWork, and Netflix are only a few of the companies using Vue. js. Because of the advantages of Vue. js, many companies and businesses use the framework to enhance their software development process.
Does Google use Vue js? ›Even Google built their Careers platform based on VueJS and not their native Angular framework, and Apple built their tutorial website with VueJS.
Why people prefer Vue over React? ›Vue also uses the virtual DOM, but compared to React, Vue has better performance and stability. According to this data, Vue and React's performance difference is subtle since it is only a few milliseconds. This proves that Vue and React are very similar in terms of performance.
Is Vue easy to learn if I know React? ›
Learning Curve
Vue is easier to learn compared to React. This is because Vue separates concerns in a way that web developers are already used to, decoupling HTML, CSS, and JavaScript. It also allows JSX for developers who prefer to adopt that style.
- Use Kebab or Pascal Case to create Component.
- Avoid using v-if with v-for Elements.
- Use Computed property for filtering.
- Always use the : key attribute with v-for.
- Use kebab case to name an event.
- Component data must return function.
- Use camelcase for Prop name casing.
- Scoping component style.
With Vue. js it's as easy as pie because it relies only on JavaScript and doesn't require any other tools to work. Vue also allows you to write the templates as you wish: using HTML, JS, or JSX (JavaScript syntax extension). Due to its components and lightweight nature, Vue can be used in nearly any project.
Is Vue better than bootstrap? ›According to the StackShare community, Bootstrap has a broader approval, being mentioned in 7044 company stacks & 1115 developers stacks; compared to Vue. js, which is listed in 849 company stacks and 1219 developer stacks.
Is Vue better than React? ›Vue can be faster than React out of the box, due to more smart optimizations it is doing. React letting you do whatever you want, but not helping to do it. There is no difference how they handle states, or how they perform DOM manipulations. The difference, we are looking for, hidden in another place.
Is Vue JS powerful? ›Apart from being one of the speediest web development frameworks, it also offers impeccable user experience in single-page applications and user interfaces. Vue. js can launch mobile apps quicker than frameworks such as React. js or Angular.
How different is Vue from React? ›React vs Vue: Differences
Let's begin with the most obvious distinction: React is a library, whereas Vue is a framework*. React allows DOM manipulation, component architecture, and state management (the component-level state, not Redux). All the rest gets left up to the community.
Vue. js is one of the simplest and most straightforward frontend frameworks. It is relatively small in size but does have a virtual DOM, a component-based architecture, and two-way data binding. All of these elements lead to great performance and ease the work associated with updating components and tracking changes.
What is the simplest JS framework? ›While some enjoy using Angular or React, Vue is considered the easiest of the three to learn. It also features component-based architecture like those two competitors, has concise documentation and its tiny size helps sites run faster. Vue is on the rise in terms of popularity, too.
What is the easiest framework to learn? ›In 2022 Vue. js is considered as a very popular JavaScript framework. Evan You's main goal while developing Vue. js was to lower the barrier into front end development, which is why it is one of the simplest frontend frameworks that can be used to write SPA applications with minimum effort.
Does Vue js make money? ›
Vue's creation is funded through Evan's Patreon account, which now pulls in over $16,000/mo, enough to cover his salary along with his new hire—a developer dedicated to triaging issues.
How many companies use Vue js? ›js. We have data on 36,534 companies that use Vue. js.
What should I know before learning Vue js? ›Prerequisites: Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line. Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure.
Can I get a job if I only know JavaScript? ›Javascript is the most popular language among developers today. People with Javascript skills are in high demand in the job market, particularly in fields like web development. Its unshakable popularity has allowed Javascript to attract hoards of new learners searching for exciting and lucrative career paths.
Can a non IT person learn JavaScript? ›Not only is it beginner-friendly; it will also set you up with some extremely valuable transferable skills. JavaScript supports object-oriented, functional, and imperative styles of programming—skills which can be transferred to any new language you might learn later on, such as Python, Java, or C++.
How much JavaScript does a front end developer need to know? ›I'd say 60% core JS is enough to get a hired as a frontend dev but there's actually no exact value you can append to knowledge of a progamming language. My advice would be to know how JS interacts with web applications and how that interaction is consumed by users.
Are there any drawback of Vue js you know? ›One of the cons of the Vue. js framework that the development team may face is related to binding. The fact is that the reactivity system in two-way binding re-renders only those parts of the code that were caused and often make mistakes when reading. Thus, for correct data processing, they need to be flattened.
Is there a difference between Vue and VUE JS? ›js Vue Native is a wrapper around React Native APIs, which allows you to use Vue. js and compose rich mobile User Interface.. Vue. js can be classified as a tool in the "Javascript UI Libraries" category, while Vue Native is grouped under "Cross-Platform Mobile Development".
Does Netflix use Vue? ›Adobe, Netflix, and Nintendo are some more well-known tech companies that use Vue. Here is a quick look at the tools these companies are leveraging Vue for: Adobe: Adobe Portfolio, which enables users to build custom websites via online portfolios.
Does Spotify use Vue? ›vue-spotify
Spotify client built with vue. js / vuex. Authenticated users must have a valid Spotify Premium subscription because if it doesn't, Web Playback SDK will not work.
Why is VUE JS famous? ›
TechDay - The Top Reasons Why Vue.js is so Popular. Vue.js is a popular JavaScript framework for front-end development developed and constantly updated by Evan You and his team. You can use this open-source framework to develop any single-page application or user interface.
Is Vue replacing React? ›As per our last blog, Vue. js is one of the top JavaScript frameworks, and is replacing Angular and React. VueJS is a JavaScript library for building web interfaces. It aims to provide data-Reactive components with a simple and flexible API.
Why Angular is better than Vue? ›Angular is an obvious choice for building enterprise-based applications because of its extensive built-in functionalities and community support. Vue is a technically sound framework when it comes to building user interfaces and solving complex problems.
Which is more popular Vue or React? ›Popularity. According to a survey by Stack Overflow 40.13% of the developers believe that React is the most commonly used JavaScript Framework. Angular and Vue follow it with 22.96% and 18.97%, respectively.
What is the average salary of a Vue developer? ›The national average salary for a Vue Js Developer is ₹5,25,982 in India.
How much does a Vue programmer earn? ›As of Jan 14, 2023, the average annual pay for a Vuejs Developer in the United States is $121,919 a year. Just in case you need a simple salary calculator, that works out to be approximately $58.61 an hour. This is the equivalent of $2,344/week or $10,159/month.
What is the average salary of a Vue js developer? ›Vue. Js Developer salary in India ranges between ₹ 2.0 Lakhs to ₹ 10.5 Lakhs with an average annual salary of ₹ 4.5 Lakhs.
Is it easy to learn Vue from React? ›Vue is easier to learn compared to React. This is because Vue separates concerns in a way that web developers are already used to, decoupling HTML, CSS, and JavaScript. It also allows JSX for developers who prefer to adopt that style.
Why Vue JS is not popular? ›Vue js is not popular because it's a new framework compared to React js and Angular js, and it's not used by a lot of market leaders, another reason is it has very few resources compared to the popular frameworks.
How much JavaScript do I need to know for Vue JS? ›To get started, Vue. js is one of the most straightforward frameworks out there for most developers to jump into, as this framework uses JavaScript. Therefore, anyone who has basic JavaScript knowledge will be able to develop with Vue.
What should I learn before Vue? ›
- HTML & CSS. HTML and CSS are the foundations of the web. ...
- JavaScript basics and Modern JavaScript (ES6 – ES7 – ES8) ...
- Git. ...
- npm or Yarn. ...
- Vue. ...
- Vue CLI.