Tooling and Project Setup

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.

The official toolchain for a Vue application is create-vue on top of Vite. This page covers scaffolding, the dev and build steps, and the editor and quality tools that understand .vue files. See Tooling for the canonical list.

Scaffolding with `create-vue`

create-vue is the official project generator. It asks a few questions (TypeScript, JSX, Vue Router, Pinia, Vitest, ESLint, Prettier) and writes a ready-to-run Vite project:

npm create vue@latest
# then
cd my-app
npm install
npm run dev

The source lives at github.com/vuejs/create-vue. A generated project has index.html at the root as the entry document, src/main.js (or .ts) creating the app, src/App.vue as the root component, and vite.config.* holding the @vitejs/plugin-vue setup.

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'

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

Vite: dev server, HMR, and build

npm run dev starts Vite’s dev server. It serves your source over native ES modules with no bundling, so startup is near-instant, and it patches the running page on save through hot module replacement — an edit to a .vue file swaps just that component and keeps its state where possible.

npm run build runs vite build, which bundles and minifies with Rollup, hashes asset filenames, and writes a static dist/ you can host anywhere. npm run preview serves that dist/ locally to check it before deploying.

From scaffold to static assets

flowchart LR a["npm create vue@latest
(scaffold)"] --> b["vite
dev server + HMR"] b -->|iterate| b b --> c["vite build
(Rollup bundle)"] c --> d["dist/
static HTML, JS, CSS"] d --> e["any static host
or SSR adapter"]

Environment modes

Vite loads .env files by mode. dev runs in mode development, vite build in mode production; --mode staging selects .env.staging. Only keys prefixed VITE_ are exposed to client code, as import.meta.env.VITE_*:

# .env.production
VITE_API_BASE=https://api.example.com

const base = import.meta.env.VITE_API_BASE

See Env Variables and Modes.

Vue CLI is in maintenance mode

The older Webpack-based Vue CLI (@vue/cli) is in maintenance mode and is not recommended for new projects; the Vue docs point all new work at create-vue and Vite. Migrate existing vue-cli projects when practical.

Editor support: Vue Language Tools

Vue Language Tools (the "Vue - Official" VS Code extension, formerly Volar) provides SFC syntax highlighting, template IntelliSense, cross-block type checking, and go-to-definition between <template> and <script setup>. Other editors consume the same @vue/language-server over the Language Server Protocol. See IDE support.

Linting and formatting

eslint-plugin-vue parses .vue files and lints the template as well as the script — unused components, invalid directive usage, required prop defaults, and more. Pair it with Prettier for formatting and let ESLint defer stylistic rules to it. create-vue wires both up on request; a flat config looks like:

// eslint.config.js
import pluginVue from 'eslint-plugin-vue'

export default [
  ...pluginVue.configs['flat/recommended'],
  { rules: { 'vue/multi-word-component-names': 'off' } },
]

Type-checking SFCs with `vue-tsc`

tsc does not understand .vue files. vue-tsc wraps the TypeScript compiler with the same SFC support the editor uses, so CI can type-check templates and <script setup> blocks:

vue-tsc --noEmit -p tsconfig.json

create-vue adds this as the type-check script. Background in Using Vue with TypeScript and Vue and TypeScript.

Vue DevTools

Vue DevTools inspects a running app — the component tree, each component’s props and reactive state, an events and performance timeline, and panels for Vue Router routes and Pinia stores. It ships three ways:

Browser extension (v7) for Chrome, Firefox, and Edge — adds a Vue tab to the browser devtools.
Standalone app (npm i -g @vue/devtools) — an Electron window, for debugging non-browser targets or older browsers.
Vite plugin (vite-plugin-vue-devtools) — embeds the DevTools UI as an in-page overlay in dev, with extra features such as an inspector that jumps from a rendered element to its source.

// vite.config.js
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

export default {
  plugins: [vue(), vueDevTools()],
}