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 (Vue 3.0 or "One Piece"). Evan You announced it back in Fall 2018 at Vue.js London – 2 years before its officially release in September 2020.

We're going to collect all valuable infos and resources in this article for you, so you'll be up-to-date about the release process and your first steps with Vue 3.

Vue 3 release date

The Vue 3 core has officially been released as of 18 September 2020 🥳  - here's the official release announcement! This means that the core is now stable. But it remains on the @next distribution tag for a bit longer.

All of the official libraries do already support Vue 3 as well. A dedicated migration build and IE11 support will follow soon as well. The Vue 3 docs have already been published, along with a migration guide telling you what has changed.

You can absolutely start experimenting with the new version. Go and have fun with it!

To make it easier for you to start experimenting, here are the most important tools.

Vue 3 features & changes

As Evan You summarized it, Vue 3 is faster, smaller, more maintainable and it's 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 API reference for more info.

Yes, this actually changes the way we use Vue (if we decide to use the Composition API). However, it won't break anything in your Vue 2.x apps, as Vue 3 is still 100% compatible with the current syntax / the options-based API. Personally, we think that the Composition API will bring us a lot of flexibility, and lead to better structured code as well as scalability.

If you want to start experimenting within your Vue 2 apps, the new Composition API is available for 2.x as a plugin.

There are also already some Composition API utility libraries available:

VueUse Collection of Composition Utilities
icon-eye-dark Created with Sketch. 5.802

Vue Composable Collection of Composition API Components
icon-eye-dark Created with Sketch. 4.881

VueHooks Collection of Utility Composition Functions
icon-eye-dark Created with Sketch. 2.022

Other 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)
  • More flexibility for 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's a a migration guide, and there will be 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.

Can I use Vue 3 or should I still use Vue 2 for a new project?

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 a bit longer, rather do that and then start developing with Vue 3 as soon as all the sub projects are stable as well. Keep in mind, though, that not all open-source components might be ready in v3 versions.

(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 resources available helping you can learn more about new functionality.

Should I start learning Vue 2 or Vue 3?

If you're just starting out with Vue, don't hesitate to start learning with the vast v2 resources out there. 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.

The Vue team is really awesome when it comes to documentation, so we're sure you will not have any troubles migrating to Vue 3 later either. See our list above to check out some of the first courses focused on v3, if you'd rather start there.

Vue 3 drama

In case you remember hearing something critical about version 3 waaay back, we'd like to debunk that just in case 😊

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!).

If you are still a bit apprehensive about version 3 because of some negative comments, here are some articles explaining why you shouldn't be:

Framework changes can be stressful. But we are convinced that the changes in v3 are a huge step forward!

Similar Articles
#intervue: Stefan Rasmussen, Creator of a Vue.js Website Builder that builds Vue.js Websites 🤯
10.05.2019  •  in #Intervue
Our #intervue series continues with an interview with Stefan Rasmussen, creator of grid.studio! This tool is a total Vue-ception: It's a website builder built with Vue.js that lets you build Vue.js websites with a drag'n'drop editor!
Renderless Components in Vue.js [via Adam Wathan]
08.04.2018  •  in #Tutorial, #Bookmarks
On his blog, Adam Wathan explains how to create your Components in a way that lets you still easily customize their styling.
COMMUNITY SPONSORS