Suggest an edit

Improve this article

Refine the answer for “What are local and global components?”. 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)

Local and global components are two ways to **register** components in Vue.js, which determine exactly where a component can be used.

---

## 1. Global components

A **global component** is a component that is available **throughout the whole application**, without needing to import it in every file.

#### How is a global component registered?

In `main.js`:

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

const app = createApp(App)

app.component('BaseButton', BaseButton)

app.mount('#app')
```

Now the `<BaseButton />` component can be used anywhere:

```javascript
<template>
  <BaseButton>Save</BaseButton>
</template>
```

---

### Pros of global components

- convenient for **basic, frequently used elements** (buttons, inputs, cards)
- less importing in components
- a good fit for your own UI kit of components

### Cons

- harder to tell where a component comes from
- the global namespace can get "cluttered"
- worse scalability for large projects
(with hundreds of components, local registration is better)

---

## 2. Local components

A **local component** is a component that must be **explicitly imported** into the component where it will be used.

#### How is a component registered locally?

In a component:

```javascript
<script setup>
import UserCard from './UserCard.vue'
</script>

<template>
  <UserCard />
</template>
```

In `<script setup>`, global registration is **not needed**; the import itself registers the component.

If a regular `<script>` is used:

```javascript
<script>
import UserCard from './UserCard.vue'

export default {
  components: {
    UserCard
  }
}
</script>
```

---

### Pros of local components

- structures the project better
-> it's clear where a component is used
- no cluttering of the global namespace
- suits large applications
- easier to maintain, refactor, and test

### Cons

- must be imported manually every time
- slightly more code, but in SFC/Vite this is barely noticeable

---

## When to use global vs. local?

#### Global, when:

- the component is used **everywhere**
- it is a **basic UI component** (button, icon, input)
- you are building your own UI kit

Examples:

```javascript
BaseButton
BaseInput
BaseModal
AppIcon
```

#### Local, when:

- the component is needed only in a specific place
- it is too specific
- it is not part of a UI library

Examples:

```javascript
UserCard
TodoItem
LoginForm
RoadmapNode
```

---

## Summary (cheat sheet)

| Component type | Where available | How it's used | When to use |
|---|---|---|---|
| **Global** | Throughout the application | `app.component('Name', Comp)` | Frequently used basic components |
| **Local** | Only in one component | `import Comp from ''` | Most of the application's components |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.