candy-Tong/vue3-demo

vue-next

This is the repository for Vue 3.0.

Quickstart

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

• In-browser playground on Codepen

• Scaffold via Vite:

  # npm 6.x
  npm init vite@latest my-vue-app --template vue
  # npm 7+, extra double-dash is needed:
  npm init vite@latest my-vue-app -- --template vue
  # yarn
  yarn create vite my-vue-app --template vue

• Scaffold via vue-cli:

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

Changes from Vue 2

Please consult the Migration Guide.

Also note: Vue 3 does not support IE11 (RFC | Discussion).

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 in early 2021.

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 Migration Guide for full details.

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

• 
• 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. There are currently two viable extensions for Single-File Components (SFCs) support:

• Vetur (recommended if you are used to Vetur features)
• Volar (recommended if using TypeScript with SFCs, or <script setup> syntax)

TypeScript Support

• All Vue 3 packages ship with types.
• vue-tsc perform TypeScript type checks / diagnostics on Vue SFCs via the command line, generate TypeScript definitions from Vue SFCs.

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]