Vue 3 – A roundup of infos about the new version of Vue.js

By now you're probably aware we're getting a shiny new version of Vue. Evan you announced it back in Fall 2018 at Vue.js London – here's his slide deck about Vue 3.0 Updates. His announcement summary was also published on the official Vue.js blog.

Until the release of Vue 3, we want to collect all valuable infos and resources in this article for you, so you'll be up-to-date.

Vue 3 release date

There's no official release date, but the roadmap shows the release is planned in Q2 2020. The new version is currently in beta stage!

This means that all planned RFCs are now implemented. Before the official release, the team and people working on important libraries will work on stability and seamless integration. That includes docs & migration guides, Vue DevTools, Router, CLI and Vuex.

You can absolutely start experimenting with the new version.Go and have fun with it! If you discover bugs while building demo apps, report them through the Vue Issue Helper.

To make it easier for you to start experimenting, here are the most important tools. Keep in mind they are all WIP and experimental right now, though.

Here's a slide deck about the State of Vue from 16th of April if you want to dig deeper!

Vue 3 features & changes

As Evan You summarized it, Vue 3 will be faster, smaller, more maintainable and it will be easier to target native.

Composition API

One of the most significant changes is that a new API that will allow for a function-based way of writing your component, inspired by React Hooks.

It lets you encapsulate logic into "composition functions" and reuse that logic across components. Read the whole Request for Comments (RFC) for more info or look into the API reference. (The API has been renamed from "Functions API" to "Composition API" along the way, so don't let that confuse you if you read that name anywhere!)

Yes, that changes the way how we use Vue. However, it won't break anything in your Vue 2.x apps, as the new API is 100% compatible with the current syntax, which won't be deprecated any time soon.

Personally, we think that this change will bring us a lot of flexibility, and lead to better structured code.

If you want to start experimenting, the new Composition API is available for 2.x as a plugin, and there's an (evolving) API reference.

Other pretty exciting changes in Vue 3:

  • Virtual DOM rewrite for better performance and improved TypeScript support
  • Native portals – now called Teleport
  • Fragments (virtual elements that won't be rendered in the DOM tree)
  • Global mounting
  • Conditional suspending of component rendering
  • ... and more.

Read more about the process of rewriting the new version of Vue.js, and how decisions were made in this article by Evan You 👉️ The process: Making Vue 3

Migration from Vue 2

So, what happens to Vue 2, and how will migration be handled? There will be one last release for version 2 which backports compatible Vue 3 features and adds deprecation warnings for breaking changes.

This version will be available as a LTS (lon-term support) version for 18 months, which means that it will still get security updates and is absolutely safe to keep using.

There will be migration guides and a compatibility build for Vue 3. A command line migration tool will also be available, helping you to automatically migrate as far as possible, and giving hints where you will need to upgrade manually.

Should I still use Vue 2 for a new project or wait for Vue 3?

If you decide to use Vue for a new production project, the official recommendation is to still start with Vue 2 right now. If you do, keep an eye on the changes and avoid using removed features as well as third party libraries that likely won't get updated quickly.

If you can wait until the end of Q2, rather do that and then start developing with Vue 3.

(All these infos and recommendations are taken from the official FAQs in the Roadmap for Vue 3. Check them out if you have more questions!)

Learning Vue 3

There are already talks and articles available where you can learn more about new functionality. Take these with a grain of salt, as the new version is obviously still evolving.

Vueschool is also updating their Master Class course for Vue.js 3. It's not yet available as of now, but you can leave your email to be notified when they launch. If you're a bit nervous about how version 3 will impact you, this course is a great way to combat that for sure.

Should I start learning Vue now or wait for v3?

If you're just starting out with Vue, don't hesitate to start learning with v2. Most key concepts of the framework stay the same, and your knowledge will still be valuable when v3 comes out.

Many of the changes of v3 are internal, like them rewriting the virtual DOM implementation and writing the codebase in TypeScript. This will make Vue faster, but you won't have to use TypeScript if you don't want to.

Knowing that the Vue team is awesome when it comes to documentation, we're sure you won't have any troubles adapting to any new syntax either.

Vue 3 drama

What would be change without a little drama?

There has been a heated discussion within the community (f.ex. on HackerNews and on Reddit) when the RFC for the Composition API was first released in June 2019.

Community members got a bit agitated (and sometimes rude, sadly) – mainly because it was a bit unclear at first whether the new Composition API will be purely additive (which it will be!), or if the current API will be deprecated (which it won't be!). Also, people were afraid that all the time they spent learning Vue was wasted (which it wasn't!).

In case you are still a bit apprehensive about version 3 because of some negative comments, we wanted to collect some articles explaining why you shouldn't be:

Framework changes can be stressful. But we are convinced that the changes in v3 will be a huge step forward, and you'll have enough time to adapt.

Similar Articles
The best Vue.js Frameworks
06.02.2020  •  in #Frameworks
Have a look at some of the best Vue.js Frameworks for your upcoming Projects.
Best Vue.js Datatables
27.05.2020  •  in #UI Components
Datatables are a complex beast. If you ever built data-heavy business applications, you will probably know it's not easy to make them readable and clear. Discover some of the best datatable components for Vue.js that are flexible enough to adapt to your data and use case.