Стандарты
Именование компонентов
Правило pathPrefix: false
С настройкой pathPrefix: false компоненты используются по имени файла, игнорируя путь.
// nuxt.config.ts
export default defineNuxtConfig({
components: [
{
path: '~/components',
pathPrefix: false,
},
],
})
Маппинг пути → имени
| Путь файла | Использование в template |
|---|---|
app/components/BlockWrap.vue | <BlockWrap /> |
app/components/CustomModal.vue | <CustomModal /> |
app/components/orders/Filters.vue | <Filters /> |
app/components/orders/CreateForm.vue | <CreateForm /> |
app/components/layout/HeaderComponent.vue | <HeaderComponent /> |
app/components/common/DatePicker.vue | <DatePicker /> |
Правило: app/components/[любой путь]/[FileName].vue → <FileName />
Конфликт имён
Если два компонента имеют одинаковое имя файла — переименуй файлы, добавив префикс модуля:
// ❌ Конфликт
app/components/orders/Filters.vue → <Filters />
app/components/users/Filters.vue → <Filters /> // Конфликт!
// ✅ Решение — переименовать файлы
app/components/orders/OrderFilters.vue → <OrderFilters />
app/components/users/UserFilters.vue → <UserFilters />
Правило: Всегда используй префикс модуля для компонентов в подпапках (Order, User, Service и т.д.).
Конвенции именования
Общие компоненты
components/common/
├── BlockWrap.vue # Обёртка с блоком
├── CustomModal.vue # Модальное окно
├── StatusBadge.vue # Бейдж статуса
├── DataTable.vue # Таблица данных
└── DateRangePicker.vue # Выбор диапазона дат
Layout компоненты
components/layout/
├── HeaderComponent.vue # Шапка (суффикс Component избегает конфликта с <header>)
├── SidebarComponent.vue # Боковое меню
└── FooterComponent.vue # Подвал
Модульные компоненты
components/orders/
├── OrderFilters.vue # Фильтры заказов (префикс Order)
├── OrderForm.vue # Форма заказа
├── OrderCard.vue # Карточка заказа
├── OrderStatusSelect.vue # Выбор статуса
└── OrderTable.vue # Таблица заказов
Формат имени файла
| Правило | Пример |
|---|---|
| PascalCase | OrderCard.vue |
| Без пробелов и дефисов в имени | OrderStatusBadge.vue |
| Описательные имена | CreateOrderForm.vue, не Form.vue |
Использование в template
<template>
<!-- PascalCase (рекомендуется) -->
<BlockWrap>
<OrderFilters @change="handleFilter" />
<OrderTable :data="orders" />
</BlockWrap>
<CustomModal v-model:visible="showModal">
<OrderForm @submit="handleSubmit" />
</CustomModal>
</template>
Чек-лист
- Имя файла в PascalCase
- Нет конфликтов имён с другими компонентами
- Описательное имя (не просто
Form.vue) - Layout компоненты имеют суффикс
Component - Модульные компоненты имеют префикс модуля (
Order,User, etc.)