The road to VueJS 3

Posted by in Javascript and TypeScript

Although there is not yet a stable version of VueJS version 3, the truth is that it has been several months with a beta that is showing us the way to where VueJS 3 is going.

If you like VueJS, the best thing to can do is goint to Request for Comments, or RFC, where you can read what the community is thinking about: improvements, bugs, …. The last one you can find them here.

Let me describe to you what are the main features of Vue 3:

TypeScript support

I’ve commented on it many times, mainly because I have experience with TypeScript, and it’s a luxury not to use it, because doing typed Javascript is the best thing that can happen to you if you are a developer, and specially, when working on big projects.

The compatibility until the last version 2 was quite limited, even though with the latest versions it had been improved a little, but it was still not complete, and of course, there were also problems with the main plugins like Vuex or Vou-Router.

Composition API

The second big change comes with the incorporation of Composition API, which is a new change when developing with VueJS, allowing a better reuse of the code, and above all, having everything more ordered. The VueJS team defines it as:

Composition API: they are a set of addictive APIs based on functions that allow a flexible composition of the componet’s logic

If you want to try, there is a composition API plugin available for VueJS 2 tht you can use to get a good idea of what it is coming for developers (I still have not tried).

I, personally, haven’t tried it, so I can’t talk about something I don’t know … at the moment, although of course, I will have to learn and see to what extent I am able to incorporate it in my developments.

So far, the development of a component involves creating it using data, methods and computed. The template needs to know beforehand what properties it has in order to be represented, which also has the problem of this, and which is VueJS the one in charge of translating it into functional code.

Composition API is the exposure of different mechanisms through component properties such as JavaScript functions, which make the code more readable and reusable.

Fragments

This feature is the implementation of the plugin vue-fragments, and the goal is to have more than one parent element in a component. I, personally, have not used it because the logic of a component having only one input node seems to me to be adequate. In Vue 3, this feature will be native.

Portals

Portals are special components designed to run outside the current component. That is, modal components. We have worked on a better implementation, and that will be native, but that with Vue 2 you can get with the portal-vue plugin (by the way, another plugin that I have never used either).

Multiple v-model

No doubt, I have never needed this feature in my developments, but if it is there, it will be for a reason. It will simply be possible to include more than one model to a component.

API for custom directives

Directives is one of the features of Vue that I have exploited the least (I have focused on learning others first, heh!), but it seems that Vue 3 implements a change to make it easier and more intuitive.

Suspense

It is a new component that stops the rendering of a component until a condition is met, and in the meantime, it renders another.

When will VueJS 3 be ready?

This is the big question, because a new success is ventured with this version, to make things even more difficult for other frameworks like React or Angular.

I am so sorry that this entrance is so teoric, but I wanted you to give you light to what is coming in the VueJS world with this so powerful update.

Happy coding!