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

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

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

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

Контент

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

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

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

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

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

## Спосіб №1: через `<script setup>` (сучасний і найзручніший)

У режимі `<script setup>` **імпорт автоматично реєструє компонент**, ніякого додаткового налаштування не потрібно.

#### Приклад:

```javascript

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

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

Готово - компонент зареєстровано локально.

Це найпопулярніший спосіб у сучасних проєктах на Vue 3.

---

## Спосіб №2: через звичайний `<script>` (Options API або Composition API без setup)

Якщо ти не використовуєш `<script setup>`, потрібно явно вказати компонент в опції `components`.

#### Приклад (Composition API без setup):

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

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

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

#### Приклад (Options API):

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

export default {
  name: "ProductList",

components: {
    ProductItem,
  },
}
</script>

<template>
  <ProductItem />
</template>
```

---

## Який спосіб обрати?

#### Використовуй `<script setup>`, якщо:

- проєкт на Vue 3
- хочеш писати менше коду
- хочеш більш читабельні компоненти

#### Використовуй `components: {}` лише якщо:

- проєкт успадковує старий стиль Vue 2
- потрібна сумісність з кодом Options API

---

## Підсумок (коротко)

**Локальна реєстрація компонента у Vue 3:**

#### У `<script setup>`:

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

#### У звичайному `<script>`:

```javascript
components: {
  MyComponent
}
```

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

Для рев’юера

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