Vue 3 isn’t officially released yet, but the Vue team has released the Alpha version for us developers to use some of the features that will be shipped with Vue 3. At the time of writing this article, we have the (Alpha-10) version available to experiment with. Though this isn’t ready to be used in production yet, it’s always good to learn new features in advance so that when the stable version is released, we can directly start using it or migrate the existing Vue 2 applications to version 3.0 to use the latest features.
We’ll use the WebPack-based setup. To do this, clone this repository:. Now install the packages:. We have a working Vue 3 project set up now. To spin up the application, just run the following:.
Open localhost:8080 in your browser, and you can see a simple counter application.
Open the package.json file, you can see the Vue version here. At the time of writing this article, the version is 3.0.0-alpha.8. Open App.vue and you’ll see the setup() method, i.e. the Composition API already being used here.
We might see some lint errors from Vue’s official plugin, eslint-plugin-vue, because the linters are not yet updated to understand the new syntax.
Before we start coding, let’s go over the new features in Vue 3. Vue 3 is faster, smaller in file size, and equipped with better TypeScript support.
Some of the new features that we can discuss and learn to implement in this article include:. Composition API (Now built-in).
Multiple root elements (Template syntax ). Multiple V-models. Better reactivity. Composition API was launched as a plugin a few months back, so there is nothing new there, but in Vue 3 we don’t have to install it like a plugin anymore.
Now, it’s built into the package and can be used out of the box without any additional setup.
There are two main advantages to using the Composition API:.
What’s New in Vue 3? – Vue 3 Components, new features, and changes:
Better organization. Sharing/reusing the code. Vue 3 will still support Options API, so if you think you don’t need composition API you can always use the traditional methods used in Vue 2.
If you are new to Composition API, here is how we can use it to implement a component:.
Instance Lifecycle Hooks
And here’s the equivalent code in Options API:. We can see that using Composition API allows us better organization by keeping the the code (state, methods, computed properties, watchers etc) of particular features together, which was not possible in Options API.
In the above example, the code for counter and the code for changing a message is clearly separated in Composition API.
As the component grows in size, organizing code becomes an important factor.
Creating a Vue Instance
Any new developer can easily understand the code without spending too much time analyzing all the lines of code. Before, we could use Mixins to share the code. However, it was hard to keep track of states and methods in different components, and Mixins had the potential to overwrite the existing state or methods in our components if we weren’t careful. Using the Composition API makes sharing the code much easier.
We can factor out the code for a particular feature and use it in multiple places, as shown below:. Using the shared code in our component. Refer to the official Composition API guide for more details.
In Vue 2, the template tag can only take one root element. Even if we had just two
tags, we had to enclose them within a
Because of this, we had to change the CSS code as well in the parent component so that it looked as expected. In Vue 3, this restriction is lifted. There is no need for a root element anymore. We can use any number of tags directly inside the section:.
Data and Methods
Equivalent code in Vue 2:. Suspense is a new feature that renders a default/fallback component until the main component fetches the data. Sometimes we use async operations to fetch data from the server. Instead of handing the template with v-if and then setting it back when we return the data, Suspense does it for us.
Suspense can be used for both parts of the template, or the whole template:. 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:.
Experience your Vue apps exactly how a user does
Vue 2 already had great reactivity, and you might not have come across any cases where you found that reactivity was lacking. However, there were a few cases where Vue 2 fell short. Let’s revisit Vue 2 and see what those limitations were.
To demonstrate reactivity, we’ll use watchers to listen to one of the state variables and then modify it to see if the watchers are triggered:.
None of the above three modifications — such as adding a new item to an array based on the index, adding a new item to an object, or deleting an item from the object — is reactive in Vue-2.
Hence watchers won’t be triggered, or the DOM would be updated. We had to use the vue.set() or vue.delete() methods. In Vue-3, these work directly without any helper functions:.
Table of Index
We can see that watcher was triggered all four times in the Vue 3 setup. When you open main.js in the about project, you’ll notice something different.
New features in Vue 3
We no longer use the Global Vue instance to install plugins and other libraries. Instead, you can see createApp method:. The advantage of this feature is that it protects the Vue application from third party libraries/plugins we use which might override or make changes to the global instance — mostly by using Mixins.
Now with the createApp method, we install those plugins on a particular instance and not the global object. Portal is a feature where we can render a part of the code which is present in one component into a different component in a different DOM tree. There was a third-party plugin called portal-vue that achieved this in Vue 2.
- In Vue 3, portal will be built in and it is very easy to use.
- Vue 3 will have a special tag called
, and any code enclosed within this tag will be ready to be teleported anywhere.
- The Teleport tag takes a to argument.
- Let’s see this in action:.
- Any code inside
will be displayed in the target location mentioned. At the time of writing this article, doesn’t work in the Alpha version mentioned above.
- If you are planning to start your new project, you can still go ahead and use Vue 2 with a Composition API plugin and later migrate to Vue 3 as there won’t be any breaking changes other than the removal of filters.
Vue 3 will be packed with lots of new and amazing features. The integrated composition will make a significant impact on the development flow in future apps by providing an easy way to organize and share code with great TypeScript support. The performance will be fine-tuned, and the size of the package is reduced even more in the new upcoming update.