Vue 3 Changes

Posted on  by admin

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

Learning Vue 3

(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.

As Evan You summarized it, Vue 3 is faster, smaller, more maintainable and it's easier to target native.

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.

Key Attributes

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:.

  • Vue Composable Collection of Composition API Components .
  • VueHooks Collection of Utility Composition Functions .
  • 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.

Filters

Conditional suspending of component rendering. 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.

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

Migration plan to Vue 3

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!

Company Logo of EasyPractice .

Functional Components

Link to Joblist.app. Syntax of Vue 3 is changing inspired by React Hooks. New API brings advanced features.

Tree shakable hence more lightweight. 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.

reactive(obj) will return a new object that looks exactly the same as obj, but any mutation to the new object will be tracked.

The Workflow

It's implemented with Proxies so now we can add new properties to it instead of Vue.set like previously. reactive obj that has .value property and is fully reactive.

Way better to use than reactive. reactive obj that has .value property and is fully reactive. Way better to use than reactive.

Event Bus

By vladimirnovick. Vue has a large following of developers. It’s easy to use and can be picked up relatively quickly. Personally I think it combined the best of React and Angular and found a way to strike a balance to get the best of both worlds.

Evan You, the creator of Vue, previewed a new version of Vue during his keynote speech at Vue Toronto.

Some of the takeouts from the preview are what will be covered in the rest of this article. The biggest change coming to Vue 3 is a new syntax called Composition API.

Vue 2 uses an Object-based API to compose component logic. A small component that contains a count and button to increase the count can be written like so:. Logic is written in a set of properties and function exposed by Vue. One of the issues with this is that code reuse and organization can become a chore as the application grows in size.

And this is one of the motivations behind the new version.

The component above re-written in Vue 3 would look like so:. Vue developers have split opinions on the new composition API.

Mounting

The good news is the new syntax can be used alongside the old one so you won’t have to rewrite old projects to use the new syntax. New components can be written with the new syntax and it should work.

Let’s look at the new syntax quickly. Vue 3 is split into modules and you’ll need to import what you use.

This enables module bundlers to do tree-shaking so the production bundle ends up with only what the application uses. The setup function is the only function inside the component and contains all the component’s logic.

reactive makes the state variable capacity a reactive reference so it gets updated automatically. This method updates the capacity property.

Async components

The new syntax makes it easier to keep related logic together which would not be as easy using the previous syntax. At the end of the setup function, we return the variables and functions that our template needs access to work.

This gives us more control as to what is accessible by the template and makes our components more maintainable.

This is one thing that has been requested for by a good number of Vue developers so it’s great to see that it’s coming to Vue 3. Using the Vue CLI, one can create Typescript projects from scratch but some third party packages are needed to create a true, complete Typescript project.

Vue 3 promises to bring better support for Typescript.

Vue is already quite small (20 kb gzipped) at runtime but the new version is expected to be even smaller (10 kb gzipped).

However, in the new version, the virtual DOM has been re-written from the ground up to use a more efficient code.

More

Static tree hoisting and static props hoisting would avoid re-rendering static parts of the virtual dom and repatching nodes that are not going to change. These are some of the changes that would make it faster.

For a full list of some of the changes, do checkout Vue Mastery. The composition API is by far the biggest change in Vue 3 and it does take some getting used to. The core concepts of Vue, however, remain the same and once you get used to the new syntax, it’s still the same old Vue but better.

You can start playing with the new syntax by using the Vue Composition API plugin. You can follow this blog post to get started.

Vue 3 is here and everyone is looking for a way to migrate and start using it as soon as possible.

Composition API

Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket. https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.

Modernize how you debug your Vue apps - Start monitoring for free.