Created by Maximilian Schwarzmüller
    Last Updated on September 21, 2020

    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:

    You can learn all about Vue 3 from the ground up - including advanced concepts and new features like the brand-new Composition API - in-depth with my Vue - The Complete Guide Course.

    I will very soon release a full Vue 3 update (completely re-record the course). You get this update for free (+ the existing course) if you are enrolled!

    # 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.

    Important!

    The new Composition API is 100% optional! You don’t have to use it, you can stick to the old Options API which you already know from Vue 2.

    # 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.