introduction.md

Introduction

::: info 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.

• Quickstart
• Notable New Features
• Breaking Changes
• Supporting Libraries

Overview

<iframe src="https://player.vimeo.com/video/440868720" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

Start learning Vue 3 at Vue Mastery.

Quickstart

• Via CDN: <script src="https://unpkg.com/vue@next"></script>

• In-browser playground on Codepen

• In-browser Sandbox on CodeSandbox

• Scaffold via Vite:

  npm init @vitejs/app hello-vue3 # OR yarn create @vitejs/app hello-vue3

• Scaffold via vue-cli:

  npm install -g @vue/cli # OR yarn global add @vue/cli
  vue create hello-vue3
  # select vue 3 preset

Notable New Features

Some of the new features to keep an eye on in Vue 3 include:

• Composition API
• Teleport
• Fragments
• Emits Component Option
• createRenderer API from @vue/runtime-core to create custom renderers
• SFC Composition API Syntax Sugar (<script setup>)
• SFC State-driven CSS Variables (v-bind in <style>)
• SFC <style scoped> can now include global rules or rules that target only slotted content
• Suspense

Breaking Changes

::: info INFO 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:

Global API

• Global Vue API is changed to use an application instance
• Global and internal APIs have been restructured to be tree-shakable

Template Directives

• v-model usage on components has been reworked, replacing v-bind.sync
• key usage on <template v-for> and non-v-for nodes has changed
• v-if and v-for precedence when used on the same element has changed
• v-bind="object" is now order-sensitive
• v-on:event.native modifier has been removed
• ref inside v-for no longer register an array of refs

Components

• Functional components can only be created using a plain function
• functional attribute on single-file component (SFC) <template> and functional component option are deprecated
• Async components now require defineAsyncComponent method to be created
• Component events should now be declared with the emits option

Render Function

• Render function API changed
• $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 attributes

Custom Elements

• Custom element checks are now performed during template compilation
• Special is prop usage is restricted to the reserved <component> tag only

Other Minor Changes

• The destroyed lifecycle option has been renamed to unmounted
• The beforeDestroy lifecycle option has been renamed to beforeUnmount
• Props default factory function no longer has access to this context
• Custom directive API changed to align with component lifecycle
• The data option should always be declared as a function
• The data option from mixins is now merged shallowly
• Attributes coercion strategy changed
• Some transition classes got a rename
• <TransitionGroup> now renders no wrapper element by default
• When watching an array, the callback will only trigger when the array is replaced. If you need to trigger on mutation, the deep 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.
• Mounted application does not replace the element it's mounted to
• Lifecycle hook: events prefix changed to vnode-

Removed APIs

• keyCode support as v-on modifiers
• $on, $off and $once instance methods
• Filters
• Inline templates attributes
• $children instance property
• propsData option
• $destroy instance method. Users should no longer manually manage the lifecycle of individual Vue components.
• Global functions set and delete, and the instance methods $set and $delete. They are no longer required with proxy-based change detection.

Supporting Libraries

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.

Vue CLI

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.

• Documentation
• GitHub

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

Vuex

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.

• Documentation
• GitHub

Devtools Extension

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

  • Note: the beta channel may conflict with the stable version of devtools so you may need to temporarily disable the stable version for the beta channel to work properly.

• For Firefox: Download the signed extension (.xpi file under Assets)

IDE Support

It is recommended to use VSCode with our official extension Vetur, which provides comprehensive IDE support for Vue 3.

Other Projects

Project	npm	Repo
@vue/babel-plugin-jsx		[GitHub]
eslint-plugin-vue		[GitHub]
@vue/test-utils		[GitHub]
vue-class-component		[GitHub]
vue-loader		[GitHub]
rollup-plugin-vue		[GitHub]

::: info For additional information on Vue 3 compatibility with libraries and plugins, be sure to check out this issue in awesome-vue. :::