Vue.js 3 – A first look at the new version

Tobias
#javascript  #Vue 

Since the release of Vue.js v2, Vue.js has grown rapidly. With Angular and React, Vue.js is one of the leading frameworks in the front-end world. And the latest version of Vue.js is nearly ready to be released. The new version should be faster, smaller and developers need to write less code in the future. A goal of the core team is that developers should concentrate more on the features and the problems they like to solve, instead of code they are writing with the framework. This is the reason we are going to look into the new version and new features!

Logo

Why a new version of Vue.js?

The main focus of the third version of Vue.js is making it faster, smaller, easier to target native and even more user-friendly. Many of the changes of v3 are only internal, like rewriting the virtual DOM implementation and writing the complete codebase in TypeScript. This will make Vue.js faster and offers an improved TypeScript support. But using TypeScript is still optional. Another reason is that the core team should so be able to maintain the project easier. Vue.js v2 is already small for a mighty front-end framework, however v3 should come at half size of that. It will eliminate the unused libraries and include just the needed libraries to the final bundle. One new feature will be the Composition API. It is a new approach to organize code and components. We will look into this API in detail in a later section. Another renewal will be the option that we are able to give the v-model property a name, so that a component can handle multiple v-models which can be really usefully for complex form elements. Also the custom directive changes under the hood, so that they align better with the lifecycle of components. These are just some exciting reasons, why the core team decided to create a new major version, but all these announcements sound pretty cool to me.

Do I have to rewrite my app, so that I can update the framework?

No, there is no need to rewrite the app. The new version of Vue.js will be backward compatible. There will be also a official upgrade guide from v2.6 to v3. So if you are already familiar with v2 you should get along with v3 in no time. To put it in a nutshell, Vue.js 3 won’t be like Angular 2😜

Extensions to the classic components

There will be some interesting addition to the basic components. These extensions or special components are called: Fragments, Suspense and Portals. All of these newly-introduced extensions can already be used in v2. But you have to install a plugin (Fragment plugin, Portal plugin) in order to do so. V3 will bring these options out of the box.

Fragments

Fragments are a concept which already exists in React. A Fragment allows you to have a component with more than one root element. Why do we need this?

The are some situations where you may need your component to render an array of child nodes for inclusion in a parent component. For example, some CSS features require a particular hierarchy of elements to work correctly, like CSS grid, flexbox or first-child. Having a wrapper between the parent and children elements destroys the layout, fixing these problems in v2 leads to tedious special solutions, which are annoying.

Suspense

The next extension for components which will be added is the idea of Suspense. A Suspense component renders a fallback component until a condition is fulfilled. The content of the fallback component will be shown as long the suspended component is not full rendered. So you can easily perform async events in the background and do not have to worry about the shown content. The implementation in v3 will just look like pre-named slots, there will be a slot for the suspense content and a slot for the fallback.

Portals

A portal allows your components to render content outside the current component. This can become a great way to handle modals and popups. Every portal needs a target, where the content should be rendered. And the target component needs a prepared slot, where the broadcasted content is displayed.

What is the Composition API?

The most exciting new feature is the so-called Composition API. In v2 we use the Options API. This principle leads us to separate the components code by options and not by logic. For smaller components, it is easy to understand and readable. For more complex and larger components, it can get confusing and leads to misunderstandings. Another issue that you may have discovered when working with Vue.js for a longer time and using it on big projects, is how to extract logic that should be reused over multiple components. Vue.js has already some solutions to do that, but all of them have their own disadvantages (mixins, scoped-slots and renderless components, etc.).

The Composition API brings a new way of creating a component, separating code and extracting reusable pieces of code, so let’s dive into it. Instead of relying on the magical this context in Vue.js, a composition function builds on its arguments. So you can reuse any part of your component logic by simply exporting it as a function. The new syntax of the composition API looks like this:

Composition

As the example shows, the main action of the composition API happens in the setup function. Which is a sort of a mighty lifecycle hook. In this hook you can define every option from Vue.js v2 as a function. At the end, the setup function need to return an object, which contains everything you want to use in the template of your component. Anything that is not there, won’t be accessible from the template.

Advantages

  • It is easier to extract a feature or logic from a component into a function and share it between components.
  • It is more flexible and easier to understand than Mixins and Scoped Slots because a composition is just a functional approach.

Disadvantages

  • The biggest disadvantages is that there are now two ways how you can write and structure your components.
  • You need to learn a new API, which could increase the learning curve for beginners in Vue.js.

When can we expect the final release of Vue.js 3?

According to the official roadmap, the release should be in Q1 of 2020. But there’s no official release date announced yet, so we have to be patient. Nevertheless, the first impressions of Vue.js 3 makes me believe that waiting will be worthy.


Tobias

Tobias is Lead Web Developer at karriere.at and programmer with heart and soul, he loves to bury himself in complex problems and to master them with creative solutions. Frontend, Backend doesn’t matter, he enjoys every task.
If there is no improvement for a web application on the agenda, he likes to learn more about artificial intelligence and machine learning.


[  Further articles  ]

We're a team of makers, thinkers, organisers and digital explorers and we're always on the lookout for talented people.

Are you a good fit?