Архитектура
Shared-модули
Контекст
Между приложениями есть общий код: типы, утилиты, API клиент, stores. Нужна стратегия переиспользования.
Решение
Создать набор shared-модулей для переиспользования между приложениями.
Типы модулей
Helpers модуль
Утилиты форматирования и преобразования данных.
// Форматирование
formatCurrency(1000) // "1 000 ₸"
formatPhone("+77001234567") // "+7 (700) 123-45-67"
formatDate(date, "DD.MM.YYYY")
// Преобразование
toQueryParams({ page: 1, search: "test" })
debounce(fn, 300)
Types модуль
Общие TypeScript типы. В перспективе - автогенерация.
// Entities
interface User { ... }
interface Company { ... }
interface Order { ... }
// API
interface PaginatedResponse<T> { ... }
interface ApiError { ... }
// Enums
type OrderStatus = 'pending' | 'processing' | 'completed'
UI Layer
Nuxt Layer с кастомизацией Nuxt UI и доменными компонентами.
Что включает:
- Переопределение стилей Nuxt UI (цвета, размеры, варианты)
- Настройка шрифтов (@nuxt/fonts)
- Настройка иконок (@nuxt/icon)
- Доменные компоненты (Logo, StatusBadge, DataTable)
- Общие конфиги app.config.ts
ui-layer/
├── components/
│ ├── AppLogo.vue
│ ├── StatusBadge.vue
│ ├── DataTable.vue
│ └── ...
├── app.config.ts # Кастомизация Nuxt UI
└── nuxt.config.ts
// app.config.ts
export default defineAppConfig({
ui: {
primary: 'emerald',
gray: 'slate',
button: {
default: { size: 'md', color: 'primary' },
},
input: {
default: { size: 'md' },
},
},
})
Auth Layer
Nuxt Layer для авторизации.
auth-layer/
├── composables/
│ └── useSession.ts
├── middleware/
│ └── auth.global.ts
├── pages/
│ └── login.vue
└── nuxt.config.ts
Base Layer
Базовый Nuxt Layer с общей конфигурацией.
// nuxt.config.ts
export default defineNuxtConfig({
extends: ['@scope/base-layer'],
})
Приоритет создания
| Приоритет | Модуль | Причина |
|---|---|---|
| P0 | types | Типизация везде |
| P0 | helpers | Утилиты везде |
| P1 | auth-layer | Авторизация |
| P1 | base-layer | Общая конфигурация |
| P2 | ui-layer | После стабилизации |
Последствия
Положительные
- Единая логика между приложениями
- Легче поддерживать и тестировать
- Консистентное поведение
Отрицательные
- Overhead на поддержку пакетов