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).
If you want to quickly try out Vue 3 in a new project:
Via CDN: <script src="https://unpkg.com/vue@next"></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 hello-vue3 -- --template vue # OR yarn create vite hello-vue3 --template vue
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
If you have an existing Vue 2 project or library that you intend to upgrade to Vue 3, we provide a build of Vue 3 that offers Vue 2 compatible APIs. Check out the Migration Build page for more details.
Some of the new features to keep an eye on in Vue 3 include:
createRenderer
API from @vue/runtime-core
(opens new window) to create custom renderers<script setup>
)v-bind
in <style>
)<style scoped>
can now include global rules or rules that target only slotted content (opens new window)The following consists a list of breaking changes from 2.x:
v-model
usage on components has been reworked, replacing v-bind.sync
key
usage on <template v-for>
and non-v-for
nodes has changedv-if
and v-for
precedence when used on the same element has changedv-bind="object"
is now order-sensitivev-on:event.native
modifier has been removedref
inside v-for
no longer register an array of refsfunctional
attribute on single-file component (SFC) <template>
and functional
component option are deprecateddefineAsyncComponent
method to be createdemits
option$scopedSlots
property is removed and all slots are exposed via $slots
as functions$listeners
has been removed / merged into $attrs
$attrs
now includes class
and style
attributesis
attribute usage is restricted to the reserved <component>
tag onlydestroyed
lifecycle option has been renamed to unmounted
beforeDestroy
lifecycle option has been renamed to beforeUnmount
default
factory function no longer has access to this
contextbinding.expression
removeddata
option should always be declared as a functiondata
option from mixins is now merged shallowly<TransitionGroup>
now renders no wrapper element by defaultdeep
option must be specified.<template>
tags with no special directives (v-if/else-if/else
, v-for
, or v-slot
) are now treated as plain elements and will result in a native <template>
element instead of rendering its inner content.hook:
events prefix changed to vnode-
keyCode
support as v-on
modifiers$children
instance propertypropsData
option$destroy
instance method. Users should no longer manually manage the lifecycle of individual Vue components.set
and delete
, and the instance methods $set
and $delete
. They are no longer required with proxy-based change detection.All of our official libraries and tools now support Vue 3, but some of them are still in beta or release candidate status. You'll find details for the individual libraries below. Most are currently distributed using the next
dist tag on npm. We intend to switch to latest
once all the official libraries have compatible, stable versions.
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)
It is recommended to use VSCode (opens new window) with our official extension Volar (opens new window), which provides comprehensive IDE support for Vue 3.
Project | npm | Repo |
---|---|---|
@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.
https://v3.vuejs.org/guide/migration/introduction.html