Vue 3 global API changes - Vue.component becomes app.component, createApp. Triggers when user mentions: - "vue 3 global api" - "Vue.component vue 3" - "createApp vue 3"
Vue 3 introduces application instances. Global APIs that mutated Vue behavior are now on the app instance.
Vue.component('button-counter', {
data: () => ({ count: 0 }),
template: '<button @click="count++">{{ count }}</button>'
})
Vue.directive('focus', {
inserted: (el) => el.focus()
})
import { createApp } from 'vue'
const app = createApp({})
app.component('button-counter', {
data: () => ({ count: 0 }),
template: '<button @click="count++">{{ count }}</button>'
})
app.directive('focus', {
mounted: (el) => el.focus()
})
app.mount('#app')
| Vue 2 (Global) | Vue 3 (Instance) |
|---|---|
| Vue.config | app.config |
| Vue.config.ignoredElements | app.config.compilerOptions.isCustomElement |
| Vue.component | app.component |
| Vue.directive | app.directive |
| Vue.mixin | app.mixin |
| Vue.use | app.use |
| Vue.prototype | app.config.globalProperties |
| Vue.extend | removed (use defineComponent) |
No longer needed - handled by build tools.
// Vue 2
Vue.config.ignoredElements = ['my-el', /^ion-/]
// Vue 3
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('ion-')
Note: Only works with runtime compiler. For build setups, pass via build config.
// Vue 2
Vue.prototype.$http = () => {}
// Vue 3
app.config.globalProperties.$http = () => {}
Or use provide/inject:
app.provide('http', () => {})
// Vue 2
const Profile = Vue.extend({
template: '<p>{{ firstName }} {{ lastName }}</p>',
data() { return { firstName: 'Walter', lastName: 'White' } }
})
new Profile().$mount('#mount-point')
// Vue 3
const Profile = {
template: '<p>{{ firstName }} {{ lastName }}</p>',
data() { return { firstName: 'Walter', lastName: 'White' } }
}
createApp(Profile).mount('#mount-point')
For TypeScript, use defineComponent instead.
// Provide on app
app.provide('guide', 'Vue 3 Guide')
// Inject in component
export default {
inject: {
book: { from: 'guide' }
}
}
GLOBAL_MOUNT, GLOBAL_EXTEND, GLOBAL_PROTOTYPE