Highlights: Vue 3 will become the new default on February 7, 2022!

Be sure to read the possible actions section to determine if you need to make any changes before switching to the default version to avoid exceptions.

This article is open and authorized, and can be reprinted freely on the premise that the original address is indicated and the content is not modified.

Markdown source file | English texts

From library to framework

At the beginning, Vue was just a runtime library. But over the years, it has evolved into a framework with many subprojects:

  • The core library, i.evueNPM package
  • It contains enough documentation to fill a book
  • Build toolchains (Vue CLI, Vue Loader, and other support packages)
  • Vue Router for building single-page applications
  • Vuex for state management
  • Browser developer tools extension for debugging and analysis
  • The VSCode extension Vetur for supporting the development of single-file components
  • ESLint plugin for static style/error checking
  • Vue Test Utils for component testing
  • A custom JSX Babel plug-in that leverages the Vue runtime capabilities
  • VuePress for static web site generation

All of this is possible because Vue is a community-driven project. Many of these projects were initiated by community members who later became members of the Vue team. The rest of the projects were originally initiated by me, but are now almost entirely maintained by the team, except for the core library.

Vue 3 “soft release”

As the core library releases a major new release, all other parts of the framework need to be updated simultaneously. We also need an upgrade plan for Vue 2 users. It was a huge undertaking for a community-driven team like Vue. By the time the Vue 3 core library was completed, the rest of the framework was either still in beta or had not yet started adapting to Vue 3. Our decision at the time was to release the core library first, so that early adopters could use it first, and the library and the developers of the upper framework could adapt first, while we continued to update the rest of the framework.

During this process, we kept Vue 2 as the default version for documentation and NPM installation. This is because we know that for most users, Vue 2 will still provide a more consistent and complete experience until the rest of Vue 3 is complete.

New Vue

The “soft launch” process has taken longer than expected, but the moment has finally arrived: we are happy to announce that Vue 3 will become the new default on February 7, 2022.

In addition to the Vue core library, we have improved almost every aspect of the framework.

  • Vite based fast build tool chain
  • <script setup>The development experience is more silky combined API syntax
  • Volar provides TypeScript IDE support for single-file components
  • Vue-tsc provides command line type checking and generation for single-file components
  • Pinia provides cleaner state management
  • The new developer tools extension also supports Vue 2/Vue 3, and provides a plug-in system that allows the community library to extend the developer tools panel itself.

We also completely rewrote the main document. To release new vuejs.org (currently, the Chinese translation is still ongoing) will provide the latest summary of framework and development proposals, according to different background of the user’s flexible learning path, in the entire guide and the sample can be in API and modular API to switch between option type, and many new chapters. The website performance of the new document itself is also excellent – we’ll explore this in more detail in another blog post shortly.

Version Switching Details

Here are the details of what we call the “new default version.” Also, please read the possible actions section to determine if you need to make changes before switching to the default version to avoid exceptions.

NPM publishing labels

  • NPM install vue 3 will be installed by default.

  • The latest release tag for all other official NPM packages will point to their Vue 3 compatible versions, including VUE-Router, Vuex, VUE-Loader, and @vue/test-utils.

Official documents and sites

All documentation and official sites will switch to Vue 3 by default. Include:

  • vuejs.org
  • router.vuejs.org
  • vuex.vuejs.org
  • Utils.vuejs.org (Will migrate to utils.vuejs.org)
  • template-explorer.vuejs.org

Please note that the new vuejs.org will be a completely rewritten version, not the version currently deployed on v3.vuejs.org.

The current Vue 2 version of these sites will be migrated to the new address (the version prefix indicates the respective version of the library, not the version of the Vue core library) :

  • Vuejs.org -> v2.vuejs.org (old V2 URL will be automatically redirected to the new address)
  • router.vuejs.org -> v3.router.vuejs.org
  • vuex.vuejs.org -> v3.vuex.vuejs.org
  • vue-test-utils.vuejs.org -> v1.test-utils.vuejs.org
  • template-explorer.vuejs.org -> v2.template-explorer.vuejs.org

Making the warehouse

As of this writing, warehouse-related changes have taken effect.

All GitHub repositories under the Vuejs organization will switch the default branch to the corresponding Vue 3 version. In addition, the following repositories will all be renamed to remove next from their names:

  • vuejs/vue-next -> vuejs/core
  • vuejs/vue-router-next -> vuejs/router
  • vuejs/docs-next -> vuejs/docs
  • vuejs/vue-test-utils-next -> vuejs/test-utils
  • vuejs/jsx-next -> vuejs/babel-plugin-jsx

In addition, the translation repository for the main document will be moved under the Vujs-Translations organization.

GitHub handles repository redirects automatically, so the previous source link to the issue should still be valid.

Developer Tools Extension

Developer tools V6 is currently released under the Beta channel of the Chrome Web Store and will move to the stable channel after the release switch.

The current stable channel is still available. It will be migrated to legacy channels.

Actions that may need to be taken {#potential- required-Actions}

CDN links using an unspecified version

If you use Vue 2 through a CDN link without specifying a version, be sure to specify a version range via @2:

- <script src="https://unpkg.com/vue"></script>
+ <script src="https://unpkg.com/vue@2"></script>

- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
Copy the code

Note: Even with Vue 3, you should always specify a release range in production to avoid accidentally loading into future large releases.

npm latestThe label

If you use the latest tag or * to install Vue or other official libraries from NPM, please update to explicitly use Vue 2-compatible versions:

{
  "dependencies": {
- "vue": "latest",
+   "vue": "^2.6.14",
- "vue-router": "latest",
+ "vue - the router", "^ 3.5.3",
- "vuex": "latest"
+ "vuex" : "^ 3.6.2." "
  },
  "devDependencies": {
- "vue-loader": "latest",
+ "vue - loader", "^ 15.9.8",
- "@vue/test-utils": "latest"
+ "@ vue/test - utils" : "^ 1.3.0"}}Copy the code