Щоб використати компонент у шаблоні, Vue має знати, що це за тег. Є два способи його «зареєструвати».
Глобальна реєстрація - компонент доступний у шаблоні будь-якого компонента застосунку:
import { createApp } from 'vue';
import BaseButton from './components/BaseButton.vue';
const app = createApp(App);
app.component('BaseButton', BaseButton);
app.mount('#app');
Локальна реєстрація - компонент доступний лише там, де його імпортували. У <script setup> для цього досить імпорту:
<script setup>
import BaseButton from './BaseButton.vue';
</script>
<template>
<BaseButton>Зберегти</BaseButton>
</template>
Чому документація Vue радить локальну реєстрацію:
- tree shaking: глобально зареєстрований компонент потрапляє в збірку, навіть якщо ніде не використовується. Локальний - лише туди, де його імпортовано, і разом з тією частиною коду, що його потребує (важливо для розділення коду за сторінками);
- явні залежності: з імпорту видно, звідки компонент. З глобальною реєстрацією в шаблоні з'являється тег, походження якого треба шукати - у великому проєкті це ускладнює підтримку й рефакторинг;
- TypeScript і редактор краще розуміють імпортовані компоненти (підказки props, перехід до визначення).
Коли глобальна реєстрація доречна:
- справді базові компоненти, що використовуються майже скрізь (кнопки, іконки) у невеликому застосунку;
- компоненти бібліотеки UI, яку підключають як плагін (
app.use(PrimeVue)); - компоненти, які мають бути доступні в шаблонах, зібраних у браузері з HTML сторінки (див. Vue «острівцями» на Blade-сторінках).
Найменування:
- у SFC - PascalCase:
<BaseButton />. Так тег легко відрізнити від HTML-елементів; - шаблони в HTML-сторінці (не в
.vue-файлах) нечутливі до регістру - там тільки kebab-case:<base-button></base-button>, і без самозакривних тегів.
Автоімпорт (плагін unplugin-vue-components) - компромісний варіант: у шаблоні компонент без імпорту, але в збірку він потрапляє як локальний.
