Introduction

What is Vue?

Vue (pronounced /vjuː/, like view) is a JavaScript framework for building user interfaces(UI). It builds on top of standard HTML, CSS, and JavaScript and provides a declarative, component-based programming model that helps you efficiently develop user interfaces of any complexity.

Vue is designed to be flexible and incrementally adoptable. Vue can be used in different ways such as:

• Enhancing static HTML without a build step
• Embedding as Web Components on any page
• Single-Page Application (SPA)
• Fullstack / Server-Side Rendering (SSR)
• Jamstack / Static Site Generation (SSG)
• Targeting desktop, mobile, WebGL, and even the terminal

You can learn more about the different ways of using Vue.

Despite the flexibility, the core knowledge about how Vue works is shared across all these use cases. Even if you are just a beginner, the knowledge gained along the way will stay useful as you grow to tackle more ambitious goals in the future.

If you are a veteran, you can pick the optimal way to leverage Vue based on the problems you are trying to solve, while retaining the same productivity. This is why Vue is often referred to as “The Progressive Framework” because it’s a framework that can grow with you and adapt to your needs.

You are reading the documentation for Vue 3!

• Vue 2 support has ended on Dec 31, 2023. Learn more about Vue 2 EOL. - Upgrading from Vue 2? Check out the Migration Guide.

Learn Vue with video tutorials on VueMastery.com

Here is a quick example to give you a feel of what Vue code looks like:

Js

      import { createApp, ref } from 'vue'

     createApp({
     setup() {
         return {
         count: ref(0)
         }
     }
     }).mount('#app')

Template

<div id='app'>
  <button @click='count++'>
      Count is: {{ count }}
  </button>
    </div>

Preview

Count is: 0

The above example demonstrates the two core features of Vue:

• Declarative Rendering: Vue extends standard HTML with a template syntax that allows us to declaratively describe HTML output based on JavaScript state.

• Reactivity: Vue automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen.

You may already have questions - don’t worry. We will cover every little detail in the rest of the documentation. For now, please read along so you can have a high-level understanding of what Vue offers.

---

Prerequisites

Our documentation assumes some familiarity with web development. Before getting started, it’ll help if you’re comfortable with:

• HTML
• CSS
• JavaScript

If you are new to frontend developemnt, it best to learn the basics of HTML, CSS, and JavaScript first. You can refresh your knowledge level with these overviews for JavaScript, HTML, and CSS if needed.

---

Still Got Questions?​

Check out our FAQ.

---

Next Steps

Try this Tutorial For those who prefer learning things hands-on.

Read the Guide This guide walks you through every aspect of the framework in full detail.

Check out Examples Explore examples of core features and common UI tasks.