Компонент — переиспользуемый блок UI с собственным шаблоном, логикой и стилями. Импорт в script setup и использование как тег в template.
Именование: PascalCase в script, kebab-case в DOM. scoped стили ограничивают CSS компонентом. defineOptions для имени компонента в devtools.
Дерево компонентов: App -> Layout -> Page -> Widget. Держите компоненты маленькими и с одной ответственностью.
<!-- ButtonPrimary.vue -->
<template>
<button class="btn"><slot /></button>
</template><script setup>
import ButtonPrimary from './ButtonPrimary.vue'
</script>
<template>
<ButtonPrimary>Купить</ButtonPrimary>
</template>Книга, игра и упражнения доступны без регистрации. Видеоуроки — после оплаты курса.