Nuxt 3 Starter Kit

Современный стартовый набор для создания веб-приложений на основе Nuxt 3 с готовой архитектурой, UI компонентами и системой аутентификации.

✨ Особенности

• 🚀 Nuxt 3 - Последняя версия Nuxt с Vue 3 и Vite
• 🎨 PrimeVue 4 - Богатая библиотека UI компонентов
• 🎯 Tailwind CSS - Utility-first CSS фреймворк
• 🔐 Firebase Auth - Готовая система аутентификации
• 📝 TypeScript - Полная типизация
• 🏗 Готовая архитектура - Структурированный код
• 📱 Responsive дизайн - Адаптивный интерфейс
• 🧪 Тестирование - Настроенный Vitest
• 📚 Документация - Подробные примеры

🎨 Цветовая палитра

• Primary: #6237A0 - Основной цвет бренда
• Info: #3B82F6 - Информационные элементы
• Success: #10B981 - Успешные операции
• Warning: #F59E0B - Предупреждения
• Danger: #EF4444 - Ошибки и опасные действия

🚀 Быстрый старт

Предварительные требования

• Node.js 18+
• npm или yarn

Установка

# Клонирование репозитория
git clone https://github.com/odilovicc/starter-kit
cd nuxt3-starter-kit

# Установка зависимостей
npm install

# Запуск в режиме разработки
npm run dev

Доступные команды

npm run dev          # Запуск сервера разработки
npm run build        # Сборка для продакшена
npm run preview      # Предварительный просмотр сборки
npm run generate     # Генерация статического сайта
npm run type-check   # Проверка типов TypeScript
npm run lint         # Линтинг кода
npm run test         # Запуск тестов

📁 Структура проекта

starter-kit/
├── app/                    # Конфигурация приложения
├── assets/                 # Статические ресурсы
│   ├── css/               # Глобальные стили
│   └── scss/              # SCSS компоненты
├── components/            # Vue компоненты
│   ├── client/            # Клиентские компоненты
│   ├── form/              # Компоненты форм
│   └── ui/                # UI компоненты
├── composable/            # Composable функции
├── docs/                  # Документация
├── layouts/               # Макеты страниц
├── pages/                 # Страницы приложения
├── stores/                # Pinia stores
├── types/                 # TypeScript типы
└── utils/                 # Утилиты

🎯 Основные возможности

UI Компоненты

• AppButton - Кнопки с различными типами и размерами
• AppDialog - Модальные окна
• AppDropdown - Выпадающие меню
• AppIcon - Иконки PrimeIcons
• AppForm - Типизированные формы с валидацией

Система форм

• Декларативное описание форм
• Встроенная валидация
• Поддержка различных типов полей
• Типизированные интерфейсы

Аутентификация

• Firebase Authentication
• JWT токены
• Защищенные маршруты
• Middleware для авторизации

API интеграция

• Типизированные запросы
• Обработка ошибок
• Кэширование
• Пагинация

📚 Документация

Подробная документация доступна в папке docs/:

• Обзор - Введение в проект
• Архитектура - Структура и принципы
• UI Компоненты - Документация компонентов
• Формы - Работа с формами
• Аутентификация - Система авторизации
• API - Работа с API
• Стилизация - Цветовая палитра и стили
• Типизация - TypeScript типы
• Примеры - Практические примеры
• Настройка - Инструкции по установке

🎨 Примеры использования

Простая кнопка

<AppButton label="Нажми меня" type="primary" />

Форма с валидацией

<AppForm
  :fields="formFields"
  :submit-action="handleSubmit"
  :form-loading="loading"
>
  <template #footer="{ submitAction, disabled, loading }">
    <AppButton
      label="Отправить"
      type="primary"
      :loading="loading"
      :disabled="disabled"
      @click="submitAction"
    />
  </template>
</AppForm>

Защищенная страница

<script setup lang="ts">
definePageMeta({
  middleware: ['auth']
});
</script>

🔧 Конфигурация

Переменные окружения

Создайте файл .env:

# API Configuration
NUXT_PUBLIC_API_BASE_URL=http://localhost:3001/api

# Firebase Configuration
NUXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NUXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NUXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id

# App Configuration
NUXT_PUBLIC_APP_NAME="Моё приложение"
NUXT_PUBLIC_APP_DESCRIPTION="Описание приложения"

Tailwind CSS

Цветовая палитра настроена в tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          600: '#6237A0', // Основной цвет
          // ... другие оттенки
        }
      }
    }
  }
}

🧪 Тестирование

# Запуск тестов
npm run test

# Тесты с UI
npm run test:ui

# Покрытие кода
npm run test:coverage

🚀 Деплой

Vercel

npm run build

Netlify

npm run generate

🤝 Вклад в проект

1. Форкните репозиторий
2. Создайте ветку для новой функции (git checkout -b feature/amazing-feature)
3. Зафиксируйте изменения (git commit -m 'Add amazing feature')
4. Отправьте в ветку (git push origin feature/amazing-feature)
5. Откройте Pull Request

📄 Лицензия

Этот проект лицензирован под MIT License - см. файл LICENSE для деталей.

🙏 Благодарности

• Nuxt Team за отличный фреймворк
• PrimeVue за UI компоненты
• Tailwind CSS за CSS фреймворк
• Firebase за сервисы

📞 Поддержка

Если у вас есть вопросы или предложения:

• Создайте Issue
• Напишите на email: baxtiyor.dev@mail.ru

---

Создано с ❤️ для сообщества разработчиков