Suggest an edit

Improve this article

Refine the answer for “How to register a global component in Vue 3?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts235 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.