New to Vue.js? Check out our Essentials Guide to get started.
This guide is primarily for users with prior Vue 2 experience who want to learn about the new features and changes in Vue 3. This is not something you have to read from top to bottom before trying out Vue 3. While it looks like a lot has changed, a lot of what you know and love about Vue is still the same; but we wanted to be as thorough as possible and provide detailed explanations and examples for every documented change.
Start learning Vue 3 at Vue Mastery (opens new window).
<script src="https://unpkg.com/[email protected]"></script>
In-browser playground on Codepen (opens new window)
In-browser Sandbox on CodeSandbox (opens new window)
Scaffold via Vite (opens new window):
npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3
Scaffold via vue-cli (opens new window):
npm install -g @vue/cli # OR yarn global add @vue/cli vue create hello-vue3 # select vue 3 preset
Some of the new features to keep an eye on in Vue 3 include:
@vue/runtime-core(opens new window) to create custom renderers
<script setup>) (opens new window) experimental
<style vars>) (opens new window) experimental
<style scoped>can now include global rules or rules that target only slotted content (opens new window)
We are still working on a dedicated Migration Build of Vue 3 with Vue 2 compatible behavior and runtime warnings of incompatible usage. If you are planning to migrate a non-trivial Vue 2 app, we strongly recommend waiting for the Migration Build for a smoother experience.
The following consists a list of breaking changes from 2.x:
v-modelusage on components has been reworked
<template v-for>and non-
v-fornodes has changed
v-forprecedence when used on the same element has changed
v-bind="object"is now order-sensitive
v-on:event.nativemodifier has been removed
v-forno longer register an array of refs
functionalattribute on single-file component (SFC)
functionalcomponent option are deprecated
defineAsyncComponentmethod to be created
$scopedSlotsproperty is removed and all slots are exposed via
$listenershas been removed / merged into
isprop usage is restricted to the reserved
destroyedlifecycle option has been renamed to
beforeDestroylifecycle option has been renamed to
defaultfactory function no longer has access to
dataoption should always be declared as a function
dataoption from mixins is now merged shallowly
<TransitionGroup>now renders no wrapper element by default
deepoption must be specified.
<template>tags with no special directives (
v-slot) are now treated as plain elements and will result in a native
<template>element instead of rendering its inner content.
outerHTMLis replaced with root component template (or eventually compiled to a template, if root component has no template/render option). Vue 3.x now uses application container's
innerHTMLinstead - this means the container itself is no longer considered part of the template.
$destroyinstance method. Users should no longer manually manage the lifecycle of individual Vue components.
All of our official libraries and tools now support Vue 3, but most of them are still in beta status and distributed under the
next dist tag on npm. We are planning to stabilize and switch all projects to use the
latest dist tag by end of 2020.
As of v4.5.0,
vue-cli now provides the built-in option to choose Vue 3 when creating a new project. You can upgrade
vue-cli and run
vue create to create a Vue 3 project today.
Vue Router 4.0 provides Vue 3 support and has a number of breaking changes of its own. Check out its migration guide (opens new window) for full details.
Vuex 4.0 provides Vue 3 support with largely the same API as 3.x. The only breaking change is how the plugin is installed (opens new window).
We are working on a new version of the Devtools with a new UI and refactored internals to support multiple Vue versions. The new version is currently in beta and only supports Vue 3 (for now). Vuex and Router integration is also work in progress.
For Chrome: Install from Chrome web store (opens new window)
For Firefox: Download the signed extension (opens new window) (
.xpi file under Assets)
|@vue/babel-plugin-jsx||(opens new window)||[GitHub (opens new window)]|
|eslint-plugin-vue||(opens new window)||[GitHub (opens new window)]|
|@vue/test-utils||(opens new window)||[GitHub (opens new window)]|
|vue-class-component||(opens new window)||[GitHub (opens new window)]|
|vue-loader||(opens new window)||[GitHub (opens new window)]|
|rollup-plugin-vue||(opens new window)||[GitHub (opens new window)]|
For additional information on Vue 3 compatibility with libraries and plugins, be sure to check out this issue in awesome-vue (opens new window).
© 2013–present Yuxi Evan You
Licensed under the MIT License.