Tooling | Vue.js

Creating an Application
Reactivity Fundamentals
Class and Style Bindings
Conditional Rendering
Fallthrough Attributes
Single-File Components
Server-Side Rendering (SSR)
Production Deployment
TS with Composition API
Render Functions & JSX
Vue and Web Components
Animation Techniques
You don't need to install anything on your machine to try out Vue SFCs - there are online playgrounds that allow you to do so right in the browser:
It is also recommended to use these online playgrounds to provide reproductions when reporting bugs.
Vite is a lightweight and fast build tool with first-class Vue SFC support. It is created by Evan You, who is also the author of Vue!
To get started with Vite + Vue, simply run:
This command will install and execute create-vue, the official Vue project scaffolding tool.
Both online playgrounds mentioned above also support downloading files as a Vite project.
Vue CLI is the official webpack-based toolchain for Vue. It is now in maintenance mode and we recommend starting new projects with Vite unless you rely on specific webpack-only features. Vite will provide superior developer experience in most cases.
For information on migrating from Vue CLI to Vite:
When using Vue without a build step, component templates are written either directly in the page's HTML or as inlined JavaScript strings. In such cases, Vue needs to ship the template compiler to the browser in order to perform on-the-fly template compilation. On the other hand, the compiler would be unnecessary if we pre-compile the templates with a build step. To reduce client bundle size, Vue provides different "builds" optimized for different use cases.
Build files that start with vue.runtime.* are runtime-only builds: they do not include the compiler. When using these builds, all templates must be pre-compiled via a build step.
Build files that do not include .runtime are full builds: they include the compiler and support compiling templates directly in the browser. However, they will increase the payload by ~14kb.
Our default tooling setups use the runtime-only build since all templates in SFCs are pre-compiled. If, for some reason, you need in-browser template compilation even with a build step, you can do so by configuring the build tool to alias vue to vue/dist/vue.esm-bundler.js instead.
If you are looking for a lighter-weight alternative for no-build-step usage, check out petite-vue.
The recommended IDE setup is VS Code + the Vue - Official extension (previously Volar). The extension provides syntax highlighting, TypeScript support, and intellisense for template expressions and component props.
Vue - Official replaces Vetur, our previous official VS Code extension for Vue 2. If you have Vetur currently installed, make sure to disable it in Vue 3 projects.
WebStorm also provides great built-in support for Vue SFCs.
Other IDEs that support the Language Service Protocol (LSP) can also leverage Volar's core functionalities via LSP:
Sublime Text support via LSP-Volar.
vim / Neovim support via coc-volar.
emacs support via lsp-mode
The Vue browser devtools extension allows you to explore a Vue app's component tree, inspect the state of individual components, track state management events, and profile performance.
Main article: Using Vue with TypeScript.
Vue - Official extension provides type checking for SFCs using <script lang="ts"> blocks, including template expressions and cross-component props validation.
Use vue-tsc for performing the same type checking from the command line, or for generating d.ts files for SFCs.
Main article: Testing Guide.
Cypress is recommended for E2E tests. It can also be used for component testing for Vue SFCs via the Cypress Component Test Runner.
Vitest is a test runner created by Vue / Vite team members that focuses on speed. It is specifically designed for Vite-based applications to provide the same instant feedback loop for unit / component testing.
Jest can be made to work with Vite via vite-jest. However, this is only recommended if you have existing Jest-based test suites that you need to migrate over to a Vite-based setup, as Vitest provides similar functionalities with a much more efficient integration.