8 October, 2020
We have all been waiting for this moment for a long time and it finally happened – the new major release of Vue is here! The Vue 3 brings a lot of Vue new features and makes good on the promises of the past 2 years. In this article, I’m going over the new Vue features, discussing the future of the framework and making recommendations on how to start learning Vue in 2020.
Vue.js is now one of the most popular 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.
In this article, I will go through the release notes and show you the most important Vue new features and the most remarkable changes in Vue 3. As a developer who works with Vue on a daily basis, I will also give my own opinion about these changes. 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.
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. This allowed the creators to rethink and improve some of the core mechanisms in the Vue 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 Vue 3:
- 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 components in Vue 3 should be now attached to the application object instead of attaching them to the Vue instance.
Mounting global component in Vue 2:
Mounting 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 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:
- Logically related fragments of code are separated from each other into many options in the component.
- 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 in Vue 2 before implementing Vue Fragment:
Template 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 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!
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 function 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 [email protected] 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.
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.js.
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 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.
Vue is also a very good alternative for beginner developers, because it has a low entry level and gentler learning curve relative to React. 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 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. At the same time, it is becoming clear that this is the future of how Vue applications will be developed. In my opinion, learning about the new features introduced in Vue 3 now will make your future work with Vue much easier.
See also: New Node features