New Vue js features and breaking changes – overview of Vue 3

* The article has been updated to reflect the changes introduced in the latest versions up to Vue 3.04 released in December 2020. Near the end of the article, you will find an overview of what’s changed in Vue since Vue 3.0 was released.

Vue js is now one of the most popular open source frameworks for building user interfaces of modern web applications. It was created in 2014 by ex-Google developer Evan You. It has now around 157k stars on Github and a lot of community members. A few days ago, Vue 3.0 was released. It’s called “One Piece” – a reference to the japanese manga by the same title. What does the new Vue js release for web applications? How will the Vue js development change?

In this article, I will go through the Vue js release notes and show you the most important Vue new features and the most remarkable changes in the Vue 3 core library. As a developer who does web development with Vue on a daily basis, I will also give my own opinion about these changes, which encompass issues such as state management, data binding, creating custom elements and many others . I will also tell you a thing or two about the future of the Vue framework and its place in the world of frontend development. Before we get to that though, have you wondered why this and other versions of Vue are named after anime/manga titles?

Vue release names – why manga & anime?

As you might have already noticed, Vue uses popular Japanese manga and anime titles to name the subsequent releases of its framework. Vue 3 is named after the hugely popular shonen series One Piece. And the older releases include titles such as Dragon Ball, Ghost in the Shell, Hunter X Hunter, Initial D or JoJo’s Bizarre Adventure. Where is this coming from?

It’s all thanks to the original author of the Vue Framework – Evan You. As a big fan of manga, he started the tradition of blessing each release with a manga/anime title, starting with Animatrix for Vue 0.9 and moving forward in alphabetical order. It means that the next Vue release should receive a “P” title. Can you guess what title it could be?

Vue new version – long overdue Vue 3

We had to wait about 2 years for the stable release of Vue 3. The first information about Vue 3 appeared on September 21st, 2018 at the Vue.js conference in London. The first alpha version was released at the beginning of 2020. Vue Core Team decided to move all the work regarding Vue 3 to a separate repository called vue-next and rewrite the Vue core from scratch using TypeScript insteafd of vanilla JavaScript. This allowed the creators to rethink and improve some of the core mechanisms in the Vue js framework.

During these 2 years of hard work, around 100 contributors did a really great job by preparing over 30 RFC, over 600 pull requests and over 2600 commits to the Vue 3 repository. Impressive!

Vue 3 migration issues

Here is a list of the most important breaking changes in the Vue 3 JavaScript framework:

• To create a Vue app, we need to use a special createApp function instead of creating a Vue object instance,

Creating app in Vue 2:

Creating app in Vue 3:

• As you can see in the example above, the data option in Vue 3 should always be a method.
• Global Vue components in Vue 3 should be now attached to the application object instead of attaching them to the Vue instance.

Mounting global Vue component in Vue 2:

Mounting Vue global component in Vue 3:

• Other parts of the Vue ecosystem in Vue 3 also should be attached to the application object instead of attaching them to the Vue instance.

Mounting router and store in Vue 2:

Mounting router and store in Vue 3

• If you use the Vue Transition component in your app, you need to change the naming of specific classes related to handling transitions.

If you want to see all breaking changes in Vue 3, you can check the Vue migration guide.

Composition API – a good alternative to React Hooks?

In order to build Vue components in Vue 2, we are using the Options API. It means that we can set various options during the component configuration (such as data, computer, methods, watch etc).

Component configuration in Vue 2 with Options API:

As you can see, this API generates 2 basic problems:

1. Logically related fragments of code are separated from each other into many options in the component.
2. Reusing code between components is difficult and cumbersome. Of course, in Vue 2 we can use mixins to reuse some logic between components, but it still doesn’t resolve the first problem.

In Vue 3, the solution for these problems is the new Composition API. It replaces data, computed, methods and watch options with the setup method of the component.

Component configuration in Vue 3 with Composition API:

The really cool fact about Composition API is that it’s totally optional. You can still use Options API if you really want, but the Composition API is now the recommended solution for building components.

Reusing logic between components is resolved by using composition functions, which looks a lot like React Hooks. However, the composition functions work a little bit differently, but the idea is pretty much the same.

Example of simple composition function:

Vue Fragment – no need for a top level element in your template!

One of the new features in Vue 3 is the Vue Fragment. It allows us to put many root elements in the template of our component. This is a very interesting feature because in many cases we don’t need this redundant block element that we must add to wrap all the elements in our component. From now in Vue 3, we don’t have to do this anymore!

Template script in Vue 2 before implementing Vue Fragment:

Template script in Vue 3 with Vue Fragment implemented:

Teleport component – place your components anywhere in the DOM tree

Another interesting new feature provided in Vue 3 is the Teleport component. This component allows us to place HTML elements code of our component anywhere in the DOM tree (even near the ‘#app’ container).

This is a cool feature for all kinds of dialog and modal components. From now on, they don’t have to be deeply nested in the DOM tree, but we can instead “teleport” them directly to the body element (near the #app container). That’s awesome!

Read more about Teleport in the Vue 3 documentation.

Experimental new features in Vue 3

Vue 3 brings two new experimental features dedicated to the Single File Components. They are implemented as proposals to gather some feedback from the community about them:

• <script setup> – sugar syntax for using Composition API inside SFCs,
• <style vars> – state-driven CSS variables inside SFCs.

Another experimental feature available in Vue 3 is the <Suspense> component. Documentation for this component is not ready yet, but it allows waiting for nested async dependencies on initial render or branch switch.

Vue Typescript support out of the box

As I mentioned at the beginning of this article – the codebase of Vue 3 is now written from scratch in TypeScript. It definitely improves the support for using TypeScript in projects based on Vue, because the Vue type definitions are automatically generated, tested, and always up-to-date. An important thing to note is that TypeScript usage in Vue projects will still be fully optional. That’s awesome!

Another interesting fact that the Vue Core Team mentioned is that after including TypeScript into the Vue codebase, the system architecture is now significantly simplified and became much easier to maintain.

Performance improvements in Vue 3

The complete build of Vue 3 weights around 20 kB, which is the same as the Vue 2 build, but Vue 3 has more features included. However, we can decrease the weight of Vue 3 build using the tree-shaking global API. It allows us to select what features of Vue we really need, using special flags.

Another secret of performance improvements in Vue 3 is using the Compiler-Informed Virtual DOM. In this mechanism, the template compiler performs aggressive optimizations and generates render functions code that hoists static content, leaves runtime hints for binding types, and most importantly, flattens the dynamic nodes inside a template to reduce the cost of runtime traversal.

What’s next? The future of Vue

For the time being, Vue 3 core was finished and is now stable, but some other parts in the Vue ecosystem such as VueRouter or Vuex are still in beta stages. The documentation websites, GitHub branches, and npm dist tags for Vue 3 and v3-targeting projects will remain under next-denoted status. This means that npm i vue command will still install Vue 2.x and npm i vue@next will install Vue 3. The Vue team plans to release stable versions of all the Vue ecosystem parts and switch default versions and tags by the end of 2020.

The Vue core team has also started planning for version 2.7, which will be the last planned minor release of Vue 2. Vue 2.7 will include backporting compatible improvements from v3, and emit warnings on the usage of APIs that are removed/changed in v3 to help with the migration process to Vue 3. The planned release of Vue 2.7 will be in Q1 2021, which will directly become a LTS version upon release with a maintenance lifespan of 18 months.

The creator of Vue.js Evan You said that “Vue will be a framework that grows with the user”. It means that everyone who has basic knowledge of HTML, CSS and JavaScript can start learning and working with Vue using this HTML CSS JavaScript foundation. That mission also assumes that the Vue developer will never be a beginner all the time, moving from basic HTML and CSS towards more advanced concepts. We are constantly learning about new techniques so the goal of Vue is not only to provide a smooth learning curve, but to provide all the necessary tools and techniques to create increasingly challenging Vue projects.

Vue 3 new updates – December 2020

Since we published this Vue new features article, the framework has received a total of four minor updates with Vue 3.0.4 being the latest one, released just three weeks ago. They include various bug fixes found in Vue 3 as well as many improvements that improve performance and stability.

An important piece of information for the Vue ecosystem is a new stable (4.0) version of the package vue-router, which came out on December 7th this year. It’s compatible with Vue 3 and works with TypeScript.

The vuex package is still in the Release Candidate state. It means that the features are there, but some optimization is in order before it is production-ready. According to the release note of Vue 3, all packages of the Vue ecosystem should fully support Vue 3 by the end of this year. It’s a good reason to believe that very soon we’re going to hear about the release of Vuex 4. And then, the whole ecosystem will be good to go!

More and more of the popular Vue packages, libraries and tools (including packages with ready-made graphical components) are becoming compatible with the new version of Vue. Unfortunately, the introduction of a new way of mounting components in a Vue application made older versions (e.g. those with graphical components) incompatible with Vue 3. Luckily, their authors are working hard to make necessary adjustments. Soon, the vast majority of libraries should support Vue 3 without any hiccups!

Vue new features – conclusions

In my humble opinion, Vue 3 could in the nearest future make a difference in the world of frontend frameworks and become a really strong alternative for React when it comes to choosing a technology for your app.

As we can read in the “State of Frontend” by TSH, Vue.js is a very trending frontend framework. It was 2nd on the list of frameworks that respondents want to write with, use or learn in the future. The report makes it clear that React still is the “King of frontend”, but I think that Vue is truly becoming a worthy competitor for React and even more devs are going to use it in the future.

Vue is also a very good alternative for beginner developers, because it has a low entry level and gentler learning curve relative to React. You can get up to speed with developing a Vue app really quickly. I think that the Vue 3 release helps it a lot because of the introduction of the composition API and out-of-the-box support for using TypeScript with your app, which is used by over 75% respondents of the “State of Frontend” report.

If you want to learn Vue now, I really suggest you start learning from Vue 3, because there aren’t a lot of breaking changes in Vue 3. and the way it works with third party libraries is also the same. At the same time, it is becoming clear that this is the future of how Vue web apps will be developed. In my opinion, learning about the new features introduced in this Vue js latest version now will make your future work with Vue much easier.

See also: New Node features