Getting Started

This section documents the current Vue 3.x release line as published at the official Vue.js documentation, which is the reference these pages are written and verified against. No specific patch version is pinned. The Composition API with <script setup> is the authoring style used throughout; the Options API is shown only as a contrast.

This content was generated with the assistance of AI and should be verified against the official documentation before being relied on in production, since Vue and its ecosystem iterate quickly.

This section’s bibliography lists the reference material consulted while preparing these pages.

Vue is a JavaScript framework for building user interfaces on top of standard HTML, CSS and JavaScript. Its introduction describes it as a progressive framework: a small core you can drop into one part of an existing page, wrapped in optional official layers — routing, state, build tooling, server-side rendering — that you adopt only when a project needs them.

Declarative rendering and reactivity

Two features form the core. Declarative rendering extends HTML with a template syntax that describes markup as a function of JavaScript state. Reactivity tracks which state each render read, so Vue re-renders exactly the components that depend on a value when it changes — you mutate plain variables, not the DOM.

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">count is {{ count }}</button>
</template>

Clicking the button increments count; the text between the \{\{ }} interpolation delimiters updates on its own. Reactivity Fundamentals covers ref() and the reactivity system in full, and Template Syntax covers interpolation, directives and bindings.

Components and the single-file component

A Vue app is a tree of components — reusable instances that each own a piece of template, logic and style. The idiomatic authoring format is the single-file component (SFC), a .vue file with up to three top-level blocks:

<script setup>
// component logic -- imports, reactive state, functions
import { ref } from 'vue'
const name = ref('world')
</script>

<template>
  <!-- markup, with access to everything declared above -->
  <h1>Hello {{ name }}</h1>
</template>

<style scoped>
/* CSS; `scoped` limits these rules to this component */
h1 { color: teal; }
</style>

SFCs are compiled by a build tool. See Single-File Components for the full block reference, and HTML & CSS Reference for the underlying HTML and CSS.

API styles

Vue components can be written in two API styles, both fully supported.

The Composition API — the default throughout this section — defines logic with imported functions such as ref and computed. In an SFC it is used through <script setup>, where every top-level binding (imports, variables, functions) is available directly in the template, with no return statement.

<script setup>
import { ref } from 'vue'

const count = ref(0)
function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">count is {{ count }}</button>
</template>

The Options API describes a component as an object of options — data, methods, computed, watch, lifecycle hooks — where this inside each option points at the component instance. It is built on the same reactivity system underneath.

<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<template>
  <button @click="increment">count is {{ count }}</button>
</template>

The same counter component written with the Composition API in a script setup block and with the Options API object, both driving one shared template

Neither style is deprecated. Choose the Composition API for larger apps and for extracting reusable logic into composables; the Options API stays convenient for small components and for teams coming from Vue 2. The Composition API FAQ compares them in detail.

Ways of using Vue

Vue scales down as well as up — see Ways of Using Vue.

No build step. Load Vue from a CDN as an ES module and call createApp. The root component’s setup function returns the state its template uses:

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

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      return { message: ref('Hello Vue!') }
    }
  }).mount('#app')
</script>

An import map lets the rest of your code use the bare specifier 'vue' without a bundler:

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

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

<script type="module">
  import { createApp, ref } from 'vue'
  createApp({ setup: () => ({ message: ref('Hello!') }) }).mount('#app')
</script>

Scaffold a project. For an SFC-based single-page app, create-vue generates a project wired to Vite:

npm create vue@latest

It prompts for options (TypeScript, Vue Router, Pinia, testing, ESLint) and then:

cd <your-project>
npm install
npm run dev

Quick Start has the full walkthrough. For TypeScript in SFCs, see TypeScript Reference.

A framework. Nuxt builds on Vue to add file-based routing, server-side rendering and static generation, data-fetching conventions and a module ecosystem. Reach for it when you want those defaults rather than assembling them yourself.

The application instance

createApp creates an application instance. It receives the root component; app.mount renders it into a container element and returns the root component instance.

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

You can create more than one independent app on the same page — each has its own configuration and global registrations:

const header = createApp(Header)
header.mount('#site-header')

const widget = createApp(Widget)
widget.mount('#sidebar-widget')

App-level configuration lives on app.config, and registrations (app.component, app.directive, app.use for plugins) must happen before mount:

app.config.errorHandler = (err, instance, info) => {
  // send to your reporting service
}

app.config.globalProperties.$formatDate = formatDate  // reachable as this.$formatDate and in templates

Creating a Vue Application documents the instance, and the Application API lists every app.* method.

The SFC Playground

The SFC Playground compiles single-file components in the browser — no install — and shows the JavaScript that the SFC compiler emits. It is the quickest way to try an idea or to share a reproduction: the code is encoded in the URL, so a link carries the whole example.