New Framework-level Recommendations
The supporting libraries for Vue 3 have undergone major updates. Here is a summary of the new default recommendations:
- New versions of Router, Devtools & test utils w/ Vue 3 support
- Build Toolchain: Vue CLI -> Vite
- State Management: Vuex -> Pinia
- IDE Support: Vetur -> Volar
- New command line TypeScript support: vue-tsc
- SSG: VuePress -> VitePress
- JSX:
@vue/babel-preset-jsx->@vue/babel-plugin-jsx
Details
Build Toolchain
We now recommend Vite as the new build toolchain for Vue 3 projects. Vite is a new build tool that offers extremely fast server start and hot update performance. It was originally created by the Vue team but is now a cross-framework tool. Learn more about why we are recommending Vite.
You can create a new Vite-powered Vue 3 project via create-vue, our new scaffolding tool:
npm init vue@3
While Vue CLI has also been upgraded to support Vue 3, it is now in maintenance and no longer recommended for new projects. For information on migrating from Vue CLI to Vite:
Also see Tooling chapter in new docs.
Vue Router
Vue Router 4.0 provides Vue 3 support and has a number of breaking changes of its own. Check out its migration guide for full details.
State Management
Pinia is the new recommended large-scale state management solution. Pinia was created as a prototype for Vuex 5, and has now evolved into the de facto implementation for what we had planned for Vuex 5. We decided to keep its original name in respect of the amount of work that went into it by core team member Eduardo.
Vuex 4.0 also provides Vue 3 support with largely the same API as 3.x, and can be used if you have existing Vuex stores that need to be migrated to Vue 3. The only breaking change is how the plugin is installed.
IDE Support
Volar is now the new official VSCode extension, with greatly improved TypeScript support for Vue SFCs, including full type inference for template expressions.
If you have previous installed Vetur, make sure to disable it to avoid conflict with Volar.
Devtools Extension
The devtools extension has received major updates (released as v6) to support both Vue 2 and Vue 3. If you have previously installed v6 via the beta channel, you can remove it and install the extension from the stable channel now.
TypeScript Support
You can now type-check and generate definition files for Vue SFCs from the command line using vue-tsc.
Also see TypeScript Guide in new docs.
Static Site Generator
VitePress is the spiritual successor to VuePress, built on Vue 3 + Vite. It provides a far superior dev experience and also produces faster sites.
JSX
JSX support for Vue 3 is now provided via @vue/babel-plugin-jsx.