Academind Logo

Vue 3 - What's New?

Vue.js 3 is now final and out! It's (mostly) backward compatible but ships with many exciting improvements and new features which you have to know!

Created by Maximilian Schwarzmüller

Vue.js 3 was released and it's bringing a bunch of new and exciting features whilst being mostly backward compatible.

You can learn about all changes in the official migration guide.

But in the above video, I will walk you through all key changes, what they mean for you and you must (or may) adjust your Vue 2 code!

There are a couple of main changes/ features which you should be aware of:

#

Creating Vue Apps

With Vue 2, you created Vue instances like this:

new Vue({
el: '#app',
});

When using Vue 3, this syntax will no longer work!

Instead, you would write this:

Vue.createApp({}).mount('#app');

Creating Vue instances via new Vue() was replaced by calling the new createApp() method which is exposed on the Vue object.

Connecting the Vue instance to the DOM is no longer done via el inside your options object, instead you use mount('app') to tell Vue which part of your HTML code should be controlled by this Vue instance/ app.

That is almost all though - except for the data change (see next point), everything works as you know it. You can still add methods, computed etc. to your Vue instance config object.

#

data has to be a Method

In Vue 2, you could use the data property in the instance options object to set the data that can be used in the template of your Vue instance.

For example, your code could've looked like this:

new Vue({
el: '#app',
data: {
message: 'Hello from Vue 2!',
},
});

With Vue 3, you must write this code instead:

Vue.createApp({
data() {
return {
message: 'Hello from Vue 2!',
};
},
}).mount('#app');

data must now always be a function/ method!

In Vue 2, that was only required when defining data in components. In root Vue instances, you were allowed to pass a simple object as a value to data.

With Vue 3, that changed and you now always need a data method.

Besides that, data works exactly as you know it though. You can output data with interpolation, bind it with v-bind and manipulate it as needed.

#

Registering Components & More

Components, directives and (third-party) plugins are now registered differently.

Instead of

Vue.use('my-component', { ... });

it's now:

app.use('my-component', { ... });

where app is your Vue app created with createApp().

#

Optional: The Composition API

The biggest feature (besides a lot of behind-the-scenes changes of course!) is the brand-new Composition API.

I got a separate tutorial which gets you started with the Composition API.

#

What Else?

These are the biggest changes you should be aware of.

The already mentioned official migration guide lists all changes, so you might want to go through that as well of course.

Recommended Courses