# 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.

# Overview


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 vite-app hello-vue3 # OR yarn create vite-app hello-vue3
    
    1
  • Scaffold via vue-cli:

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

# Notable New Features

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

# Breaking Changes

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

# Template Directives

# Components

# Render Function

# Custom Elements

# Other Minor Changes

# Removed APIs

# Supporting Libraries

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.

# Vue CLI

As of v4.5.0, vue-cli now provides built-in option to choose Vue 3 preset when creating a new project. You can upgrade vue-cli and run vue create to create a Vue 3 project today.

# Vue Router

Vue Router 4.0 provides Vue 3 support and has a number of breaking changes of its own. Check out its README for full details.

# 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.

# 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.

# 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 rc [GitHub]
eslint-plugin-vue ga [GitHub]
@vue/test-utils beta [GitHub]
vue-class-component beta [GitHub]
vue-loader beta [GitHub]
rollup-plugin-vue beta [GitHub]

INFO

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

Deployed on Netlify.
Last updated: 10/23/2020, 4:34:13 PM