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

By now you're probably aware we got 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 official 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

Vue 3 has officially been released on 18 September 2020, and is the new default version as of 7 February 2022 🎉

While we have all been awaiting the switch from @next to default, there has been a lot of community-driven work behind it to keep the experience of the ecosystem as seamless as it always has been with Vue 2. (Successfully, by the way!)

All important subprojects including the Vue Devtools, Vue Router, Vue Test Utils and others are Vue 3-ready and we've got shiny new docs as well!

There are also a lot of new and improved tools around to enhance your Vue 3 development experience - like simpler state management with Pinia (read more about state management options for Vue 3 here!), or a build toolchain powered by the blazing fast Vite.

You can read all about the background of the release process and new tooling in Evan You's article Vue 3 as the New Default. There's also a migration guide available, highlighting changes for Vue 2 users. 

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 as well.

There are also already some Composition API utility libraries available:

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 a https://v3-migration.vuejs.org/migration-build.html.

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

You can start your new production projects with Vue 3 - the core and subprojects are ready to use. Keep in mind that the ecosystem is still evolving, so some open-source components may not yet available in Vue 3 versions.

If you still decide to 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!

Learning Vue 3

There are already resources available helping you can learn more about new functionality. As always, the Vue docs are a great place to start.

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?

If you're completely new to Vue, definitely start learning with Vue 3. There are many tutorials and courses for Vue 3 available. 

Don't be afraid to take a look at older v2 learning resources either - they're not automatically obsolete. Many of the key concepts are still the same!

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:

• Vue's Darkest Day by Daniel Elkington on dev.to
• Why people got upset with Vue 3 by Alex Kyriakidis on vueschool.io
• 3 Key Insights from Vue's new functional API RFC by Kevin Ball on zendev.com (we especially like that he points out that this change shows that it doesn't matter which framework you choose, which we've also written about.)

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