How to register a global component in Vue 3?

VueJunior~1 min read

In Vue 3, global component registration is done through the application instance created with createApp. This is done once - usually in main.js or main.ts.

How to register a global component in Vue 3?

1. Import Vue and the component

javascript

import { createApp } from 'vue'
import App from './App.vue'
import BaseButton from './components/BaseButton.vue'

2. Create the application

javascript

const app = createApp(App)

3. Register the global component

javascript

app.component('BaseButton', BaseButton)

4. Mount the application

javascript

app.mount('#app')

Now `<BaseButton />` is available anywhere in the application

You can use it without importing:

javascript

<template>
  <BaseButton>Click me</BaseButton>
</template>

Important: the name in `app.component()` = the HTML tag name

javascript

app.component('BaseButton', BaseButton)

→ the tag will be <BaseButton />.

You can name it in kebab-case:

javascript

app.component('base-button', BaseButton)

→ used as <base-button />.

Where are global components usually registered?

Usually in main.js:

javascript

src/
 ├─ main.js
 ├─ App.vue
 ├─ components/
 │   ├─ BaseButton.vue
 │   ├─ BaseInput.vue

When should you use global registration?

Use it for basic, repeating components:

BaseButton
BaseInput
BaseCard
AppIcon

You should not register everything globally - it clutters the global namespace.

Summary

Global registration in Vue 3:

javascript

const app = createApp(App)

app.component('MyComponent', MyComponent)

app.mount('#app')

After this, the component is available anywhere without importing.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.