Архитектура
UI-фреймворки и Nuxt Modules
Контекст
Нужен UI-фреймворк для админ-панелей с компонентами: таблицы, формы, модальные окна, графики.
Решение
Использовать экосистему Nuxt Modules с приоритетом:
- Nuxt UI — базовый UI-фреймворк
- Nuxt Charts — графики и визуализации
- Другие Nuxt Modules — специализированный функционал
Обоснование
Почему Nuxt Modules?
| Преимущество | Описание |
|---|---|
| Нативная интеграция | Zero-config, auto-imports, SSR-ready |
| Единая экосистема | Гарантированная совместимость |
| TypeScript | Полная типизация из коробки |
| Tailwind | Нативная интеграция стилей |
| Поддержка | Официальная поддержка от Nuxt Team |
Приоритет готовых модулей
1. Nuxt Modules (https://nuxt.com/modules) — ПЕРВЫЙ приоритет
2. npm-пакеты с Nuxt-поддержкой
3. npm-пакеты общего назначения
4. Кастомная разработка — ПОСЛЕДНИЙ приоритет
Основные модули
Nuxt UI — базовый UI
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
})
Компоненты: UButton, UInput, USelect, UTable, UForm, UModal, UCard, UTabs и 30+ других.
Nuxt Charts — графики
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui', 'nuxt-charts'],
})
Документация: https://nuxtcharts.com/
Примеры:
<template>
<Chart type="bar" :data="chartData" :options="chartOptions" />
</template>
Рекомендуемые модули
| Модуль | Назначение | Ссылка |
|---|---|---|
@nuxt/ui | UI компоненты | https://ui.nuxt.com |
nuxt-charts | Графики | https://nuxtcharts.com |
@nuxt/image | Оптимизация изображений | https://image.nuxt.com |
@nuxt/fonts | Web fonts | https://fonts.nuxt.com |
@vueuse/nuxt | Vue composables | https://vueuse.org |
Поиск модулей
Перед созданием своего решения — искать в:
- https://nuxt.com/modules — официальный каталог
- https://ui.nuxt.com/components — компоненты Nuxt UI
- https://nuxtcharts.com — графики и диаграммы
# Пример поиска
https://nuxt.com/modules?q=calendar
https://nuxt.com/modules?q=chart
https://nuxt.com/modules?category=UI
Кастомизация
Кастомизация Nuxt UI (цвета, размеры, стили по умолчанию) выполняется через UI layer. См. adr-003-shared-modules.
Примеры
Форма
<template>
<UForm :schema="schema" :state="state" @submit="onSubmit">
<UFormGroup label="Email" name="email">
<UInput v-model="state.email" />
</UFormGroup>
<UFormGroup label="Пароль" name="password">
<UInput v-model="state.password" type="password" />
</UFormGroup>
<UButton type="submit">Войти</UButton>
</UForm>
</template>
Таблица
<template>
<UTable :columns="columns" :rows="users">
<template #actions-data="{ row }">
<UButton size="xs" @click="edit(row)">Редактировать</UButton>
</template>
</UTable>
</template>
График (Nuxt Charts)
<template>
<Chart
type="line"
:data="{
labels: ['Янв', 'Фев', 'Мар'],
datasets: [{
label: 'Заказы',
data: [65, 59, 80],
}]
}"
/>
</template>
Последствия
Положительные
- Нативная интеграция с Nuxt и Tailwind
- Консистентный дизайн
- Меньший bundle size
- Простая кастомизация
- Единая экосистема модулей
Отрицательные
- Ограничение выбора экосистемой Nuxt
- Зависимость от roadmap Nuxt