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 get started, 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. 7.536

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

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

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 (long-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. The ecosystem is evolving, but many open-source components are not yet available in Vue 3 versions.

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.

If you start your project in Vue 2, keep an eye on the changes and avoid using removed features as well as third party libraries that likely won't get updated quickly. This will make any migration a lot easier later.

(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. We have put together a Vue 3 learning resource list featuring great courses, books and more! 

Should I start learning Vue 2 or Vue 3?

While there are tutorials and courses available for Vue 3 already, don't hesitate to start learning from the vast v2 resources out there.

Most key concepts of the framework stay the same. 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.

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: Nada Rifki, Co-Creator of the Vue Dark Mode Design System
04.06.2019  •  in #Intervue
Read an #intervue with Nada Rifki, Co-Creator of a design system for dark mode enthusiasts and find out why she thinks React is like a bowl of spicy peanut noodles, while Vue.js is more like a chinese street barbecue 🍜
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