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. It remains on the @next distribution tag for a bit longer.

All of the official libraries do already support Vue 3 as well. The 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.335

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

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

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.

Vueschool is also updating their Master Class course for Vue.js 3 and will release a full course on the Composition API as well. They are 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 is a great way to combat that for sure.

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 way back, we'd like to debunk that so you can look forward to it just like we do 😊

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 will be a huge step forward, and you'll have enough time to adapt.

Similar Articles
Building a Hangman Game with Vue.js [via 30Platforms]
15.07.2018  •  in #Tutorial, #Bookmarks
A fun little tutorial to learn more about Vue.js by building a Hangman Game by Blair Googer
#intervue: Hassan Djirdeh, Author of Fullstack Vue
26.04.2019  •  in #Intervue
We're starting our #intervue article series with Hassan Djirdeh, author of Fullstack Vue. He shares insights about his journey to become a Frontend Developer & Author, and what he loves about Vue.js.