Стандарты
Структура проекта
Nuxt 4 структура
ВАЖНО: В Nuxt 4 весь код приложения в папке app/.
app-name/
├── app/ ← Код приложения
│ ├── assets/
│ │ └── css/
│ ├── components/
│ │ ├── common/
│ │ ├── layout/
│ │ └── [module]/
│ ├── composables/
│ ├── configs/
│ ├── constants/
│ ├── data/
│ ├── layouts/
│ │ ├── default.vue
│ │ └── auth.vue
│ ├── middleware/
│ │ └── auth.global.ts
│ ├── pages/
│ ├── plugins/
│ ├── stores/
│ ├── types/
│ ├── utils/
│ └── app.vue
│
├── public/ ← Статика
├── nuxt.config.ts
├── tailwind.config.ts
└── package.json
Алиасы путей
| Алиас | Путь |
|---|---|
~/ | app/ |
Используй ~/ везде.
Организация компонентов
app/components/
├── common/ # Переиспользуемые
│ ├── Logo.vue
│ ├── StatusBadge.vue
│ └── DataTable.vue
├── layout/ # Layout
│ ├── Header.vue
│ └── Sidebar.vue
├── orders/ # Модуль orders
│ ├── OrderFilters.vue
│ └── OrderForm.vue
└── users/ # Модуль users
├── UserCard.vue
└── UserForm.vue
Организация страниц
app/pages/
├── index.vue # /
├── login.vue # /login
├── orders/
│ ├── index.vue # /orders
│ ├── create.vue # /orders/create
│ └── [id].vue # /orders/:id
└── users/
├── index.vue # /users
└── [id].vue # /users/:id
Именование файлов
| Тип | Формат | Пример |
|---|---|---|
| Компонент | PascalCase.vue | OrderCard.vue |
| Composable | useCamelCase.ts | useOrders.ts |
| Store | camelCase.ts | user.ts |
| Type | PascalCase.ts | Order.ts |
| Util | camelCase.ts | formatCurrency.ts |
Чек-лист
- Код в
app/, не в корне - Статика в
public/ - Компоненты сгруппированы по модулям
- Файлы именованы по конвенции
- Используется
~/для путей