Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як зареєструвати глобальний компонент у Vue 3?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

В Vue 3 глобальна реєстрація компонентів виконується **через екземпляр застосунку**, створений за допомогою `createApp`.
Це робиться один раз - зазвичай у `main.js` або `main.ts`.

---

## Як зареєструвати глобальний компонент у Vue 3?

#### 1. Імпортуєш Vue і компонент

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

#### 2. Створюєш застосунок

```javascript
const app = createApp(App)
```

#### 3. Реєструєш глобальний компонент

```javascript
app.component('BaseButton', BaseButton)
```

#### 4. Монтуєш застосунок

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

---

## Тепер `<BaseButton />` доступний у будь-якому місці застосунку

Можна використовувати без імпорту:

```javascript
<template>
  <BaseButton>Click me</BaseButton>
</template>
```

---

## Важливо: ім'я в `app.component()` = ім'я HTML-тега

```javascript
app.component('BaseButton', BaseButton)
```

→ тег буде `<BaseButton />`.

Можна назвати в `kebab-case`:

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

→ використовувати як `<base-button />`.

---

## Де зазвичай підключають глобальні компоненти?

Зазвичай у `main.js`:

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

---

## Коли варто використовувати глобальну реєстрацію?

Використовуй її для **базових, повторюваних компонентів**:

- BaseButton
- BaseInput
- BaseCard
- AppIcon

Не варто реєструвати глобально все підряд - це засмічує глобальний простір.

---

## Підсумок

**Глобальна реєстрація у Vue 3:**

```javascript
const app = createApp(App)

app.component('MyComponent', MyComponent)

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

Після цього компонент доступний у будь-якому місці без імпорту.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати215 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.