Migration to Vue 3, Part 1. – Global API

Global Vue API is changed to use an application instance.

Vue 2

const app = new Vue({
    data() {
        return {
            message: 'Hello Vue!'
        }
    },
    template: `<div id="rendered">{{ message }}</div>`
})

Vue.component('button-counter', {
    data: () => ({
        count: 0
    }),
    template: '<button @click="count++">Clicked {{ count }} times.</button>'
})

Vue.directive('focus', {
    inserted: (el) => el.focus()
})

app.$mount('#app')

Vue 3

const app = createApp({
    data() {
        return {
            message: 'Hello Vue!'
        }
    },
    template: `<div id="rendered">{{ message }}</div>`
})

app.component('button-counter', {
    data: () => ({
        count: 0
    }),
    template: '<button @click="count++">Clicked {{ count }} times.</button>'
})

app.directive('focus', {
    inserted: (el) => el.focus()
})

app.mount('#app')

Vue.extend is removed

Vue 2

const Profile = Vue.extend({
    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
    data() {
        return {
            firstName: 'Walter',
            lastName: 'White',
            alias: 'Heisenberg',
        }
    }
})

new Profile().$mount('#mount-point')

Vue 3

const Profile = {
    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
    data() {
        return {
            firstName: 'Walter',
            lastName: 'White',
            alias: 'Heisenberg',
        }
    }
}

Vue.createApp(Profile).mount('#mount-point')

Vue.prototype is replaced by config.globalProperties.

Vue 2

Vue.prototype.$http = () => {}

Vue 3

const app = createApp({})
app.config.globalProperties.$http = () => {}

Global and internal APIs have been restructured with tree-shaking support in mind, so they can now only be accessed as named exports for the ES Modules build.

Vue 2

import Vue from 'vue'

Vue.nextTick(() => {
    // something DOM-related
})

// usage in plugins

const plugin = {
    install: Vue => {
        Vue.nextTick(() => {
            // ...
        })
    }
}

Vue 3

import { nextTick } from 'vue'

nextTick(() =>
    // something DOM-related
})

// usage in plugins

const plugin = {
    install: app => {
        Vue.nextTick(() => {
            // ...
        })
    }
}