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:

• Vue CLI -> Vite Migration Guide from VueSchool.io
• Tools / Plugins that help with auto migration

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.

• Documentation
• GitHub
• RFCs

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.

• Documentation
• GitHub
• State management chapter in new docs

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.

• Documentation
• GitHub

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.