preface

It was mentioned in the Vue3 design process that Vue3.0 was expected to be released in the first half of 2020, but since it’s already July and 2020 is already halfway through, many people have gone to the Vue issue and asked what’s going on now, is it all about vite?

In response, Yuyuxi has opened an issue in vuEJs/RFC, specifically explaining vue’s current situation:

Link: github.com/vuejs/rfcs/…

The translation

Many of our users are asking the question: When exactly will Vue 3 be ready? We can’t say for sure because it’s inherently inaccurate to estimate software delivery times. As a non-profit project, we want to focus on writing great software, not on meeting deadlines. But it is a long wait, and we know that these uncertainties can make it difficult to plan projects using Vue 3. So we wanted to provide some guidance and detailed status updates to help our users adjust their expectations and plans accordingly.

Most of the time spent on Vue 3 was spent designing and building the kernel, which led to many exciting improvements. However, in order to mark the entire framework as “ready,” it goes beyond the core of Vue. We also need to have compatible versions of the support libraries (Vue Router, Vuex, Test Utils), tools (CLI, ESLint plug-ins, browser DevTool extensions, IDE extensions), and documentation (for new and old users migrating). Although we have been working hard to develop all of these pieces, it takes a lot of effort and coordination to get all the pieces together, so it is difficult to predict the timetable accurately. We originally hoped to release Vue 3 in the first half of 2020, but given the progress we’ve made so far, we’ve had to rework it. Our current goal is to release the RC release (candidate) in mid-July and the 3.0 release in early August.

The decision tree

However, that doesn’t mean you can’t start using Vue 3 now. Most parts of the framework are now in beta or alpha, and the core version of Vue has been extensively tested by our initial users. The only thing preventing us from going into RC is the browser DevTools extension (currently under active development). All important changes are already written in the RFC, and we have no plans for major changes. If you’ve been waiting to use Vue 3, here’s a decision tree to help you plan accordingly:

IWantVue3()

async function IWantVue3() {
  await read(` https://github.com/vuejs/rfcs/pulls?q=is%3Apr+is%3Amerged+label%3Acore+-label%3Arevoked+-label%3A2.6+sort%3Acomments-de sc`)

  if (isTrue("I just want to play with Vue 3"))) {
    // If you just want to try Vue 3 out - you can do it right now with Vite.
    // Vite (https://github.com/vitejs/vite) is a new dev/build tool that we
    // created that is lighter, faster and produces smaller bundles. It works
    // with Vue 3 out of the box.
    run(`npm init vite-app hello-vue3`)
    return
  }

  if (isTrue("I am planning to use Vue 3 for a new project")) {
    if (isTrue("I need IE11 support")) {
      await IE11CompatBuild() // July 2020
    }
    if (isTrue("RFCs are too dense, I need an easy-to-read guide")) {
      await migrationGuide() // July 2020
    }
    if (isTrue("I'd rather wait until it's really ready") {
      await finalRelease() // Targeting early August 2020
    })
    run(`npm init vite-app hello-vue3`)
    return
  }

  if (isTrue("I am planning to upgrade an existing Vue 2 project")) {
    await IE11CompatBuild()
    await migrationGuide()
    await ecosystem(
      // this is the tricky part: if you have an existing, non-trivial Vue 2
      // app, you likely are using some dependencies that are not yet
      // Vue-3-compatible, for example meta frameworks like Nuxt, or UI
      // component libraries like Vuetify. If that's the case, our suggestion
      // is don't be in a hurry to upgrade. It *will* take some time for the
      // ecosystem to catch up.
      // Also note that you can start using Vue Composition API in Vue 2 today
      // via https://github.com/vuejs/composition-api - we are also going to be
      // backporting compatible Vue 3 features to 2.x once 3.0 is out.
    )
    return
  }

  if (isTrue("I am the author of a Vue ecosystem library")) {
    // It's time to make your lib Vue 3 compatible!
    return}}Copy the code

The current state of the framework

Vue 3 Core

  • Current version: V3.0.0-beta.18
  • GitHub: github.com/vuejs/vue-n…
  • RFC address: github.com/vuejs/rfcs/…

The Vue 3 Core has been in beta for more than two months. We have incorporated all planned major changes to the RFC and no further major changes are planned until the official 3.0 release.

Thousands of early adopters have used it in new projects and have helped us fix many bugs and find some inconsistent behavior with Vue 2. At this stage, we consider the Vue 3 kernel to be fairly stable and ready for use with RC.

Vue Router

  • Current version: V4.0.0-beta.1
  • GitHub: github.com/vuejs/vue-r…
  • RFC address: github.com/vuejs/rfcs/…

The 4.0 version of the Router hooks still has some minor incongruent behavior with the Vue-Router 3.x release, but this is the only reason that the Vue Router is marked Beta. This version of the Vue Router can be used on non-critical new projects.

Vuex

  • Current release: V4.0.0-beta.4
  • GitHub: github.com/vuejs/vuex/…

The only difference between Vuex 4.0 and 3.x is that it is compatible with Vue 3! And it is ready to enter the RC phase together with Vue 3.

Vue CLI

You can currently use Vue 3 in the VUE CLI using vue-cli-plugin-vue-next. You can set up a new project and run vue add Vue-next to switch to Vue3. When RC is reached, Vue 3 becomes an option during the project creation process.

Note that if you don’t particularly need Webpack and IE11 compatibility, you can also use Vite to start the Vue 3 project.

JSX support

There are currently two implementations of JSX transformations for Vue 3, with slightly different syntax (for Vue specific functionality) :

  • vueComponent/jsx
  • HcySunYang/vue-next-jsx

We are using this issue to gather feedback to ensure a consistent design and to develop a formal specification of how Vue functionality should be handled in JSX. If you use Vue with JSX, please provide your feedback in this issue.

Other projects

The project name state
vue-devtools WIP(support for Vue 3 Beta in early July)
eslint-plugin-vue V7.0.0 – alpha. 9[making address]
@vue/test-utils V2.0.0 – alpha. 7[making address]
vue-class-component V8.0.0 – alpha. 6[making address]
vue-loader V16.0.0 – beta. 4[making address]
rollup-plugin-vue V6.0.0 – beta. 6[making address]

Previous excellent article

  • Microsoft launches comments section on GitHub
  • Vue 3.0.3: New CSS variable passing and the latest Ref Proposal
  • You Yuxi: Ref Grammar Sugar Proposal
  • “Double 11 small black box is cool? Let’s use CSS variables to improve!”
  • “Don’t underestimate the nine grid, one question can let a candidate reveal his true colors!”
  • “Mobile Layout Interview Questions to test your CSS Skills (Center)”
  • A series of confusing behaviors after setting prototype Objects as Proxies
  • Vue’s Super Fun New Feature: DOM Portal
  • A fun new feature of Vue: Introducing JS variables into CSS
  • Create your own Visual Data Map without any libraries
  • “Use of React’s Super-popular CSS-in-JS Library in the Vue Project: Styled – Components”
  • Is It Finally Vue’s Turn to Inspire React?
  • A Small Pit in Vue3 on IOS
  • Upgrade your React project to Immer instead of Immutable by 2020
  • “Soul Interrogation from the Author of React Hooks and Immutable”
  • Good news, Vue3 official document is available in Chinese!
  • Hooks use of the New VUe-Router
  • Vue 3:20 Years of Status Updates
  • React 17 is officially a transition version!
  • Yu Yuxi: The Design Process of Vue3
  • The Father of Node’s refactoring Deno is finally released. Will it Replace Node after all?
  • The Vue3 beta was released early this morning and openly supports scaffolding!