Vue.js new version, faster, smaller, more maintainable, Vue 3 🎁✨

I created a post because I think there are issues that need to be examined for this new version, which has long awaited and new and radical changes for Vue.js users. Let’s consider the changes for the new version that will affect the writing style of the developers and the systems with many new features! 👌

Composition API

Vue is a framework that allows us to produce very fast for small and medium-sized applications and has a high learning curve. But as the burden on our projects increases, the Options API offered by Vue 2.0 starts to make things difficult. We even realize that we spend most of our time scrolling our editor up and down.

One of the biggest features in Vue 3’s release is Vue’s new Composition API. As developers begin building more large-scale projects with Vue, some of the underlying challenges of code organization, readability, and reusability have become more apparent.

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.

The examples below are entry level for both APIs and just show the difference.

Options API:

Composition API:

Global mounting/configuration API change

We can find another major change in the way we are instantiating and configuring our application. Let’s see how it works right now:

Currently we are using global Vue object to provide any configuration and create new Vue instances. Any change made to Vue object will affect every Vue instance and component.

Now let’s see how it will work in Vue 3:

As you probably noticed now every configuration is scoped to a certain Vue application defined with createApp.

It can make your code easier to understand and make it less prone to unexpected problems caused by third-party add-ons. Currently, if some third-party solutions are modifying the Vue object, this may affect your application in unexpected ways (especially with generic mixes) and this is not possible with Vue 3.

This API change is currently discussed in this RFC which means it could potentially change in the future.

Fragments (virtual elements that won’t be rendered in the DOM tree)

Another exciting addition that we can expect in Vue 3 are Fragments.

What are fragments you may ask? Well if you create a Vue component it can only have one root node.

The reason of that is Vue instance that represents any Vue component needs to be binded into a single DOM element. The only way you can create a component with multiple DOM nodes is by creating a functional component that doesn’t have underlying Vue instance.

Multiple v-models

We all know that v-model is used for two-way binding. We mostly use it with form elements. Sometimes, we even use it with custom components.

Vue-2 allowed the use of only one v-model on a component. In Vue-3, we can bind any number of v-models to our custom components:

Portals

For every portal we need to specify it’s target destination where portal content will be rendered. Below you can see the implementation from portal-vue library which adds this functionality to Vue 2:

Vue 3 will ship with out of the box support for portals!

New custom directives API

Custom directives API will slightly change in Vue 3 just to better align with components lifecycle. This change should make the API easier to understand and learn for newcomers as it’s now more intuitive.

Even though it’s a breaking change it should be easily covered with a Vue compatibility build.

This API change is currently discussed in this RFC which means it could potentially change in the future.

Other changes in Vue 3:

• Virtual DOM rewrite for better performance and improved TypeScript support
• Conditional suspending of component rendering
• Better reactivity
• … and more.

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

Conclusion

Although the new features excite us and make us want to add them to our projects immediately, it may be early to use both core and sub-packages (vuex, routing, …) directly in a commercial project because they are not fully stable. By enjoying the new version, we can reinforce the use in our Vue sample projects, it is already less stable. 🧐

Apart from the technical details for the new version of Vue, which excites its users with many advantages, let’s conclude our article with Evan You’s sentence:

“Vue 3 is faster, smaller, more maintainable and it’s easier to target native!” 👏