Vue 3 - What's New?

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:

• Vue instances/ apps are created differently (read more, watch video)

• data must now always be a method (read more, watch video)

• Vue.component(...) etc. becomes app.comonent(...) (read more, watch video)

• v-enter becomes v-enter-from (watch video)

• The Vue Router setup changed (watch video)

• Same for Vuex (watch video)

• New Features: Fragments & Teleport (watch video)

• Optional New Feature: You can use the new Composition API (view separate tutorial)

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.

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.

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().

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.

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.