1. Что такое Nuxt 3

🌱 Что такое Nuxt 3

Nuxt 3 — это мета-фреймворк поверх Vue 3. Если Vue — это двигатель, то Nuxt — это полноценный автомобиль с навигатором, климат-контролем и парковочными камерами. Ты садишься и едешь, не думая о том, как собрать машину с нуля.

---

Проблема, которую решает Nuxt 🤔

Создание современного Vue-приложения без Nuxt требует:

npm install vue@3
npm install vue-router@4          # Маршрутизация
npm install pinia                 # Стейт-менеджмент
npm install vite                  # Сборщик
npm install @vitejs/plugin-vue    # Vue плагин
# SSR? Придётся настраивать вручную
# API сервер? Нужен отдельный Express/Fastify
# SEO? Плагины, конфиги...
# Автоимпорт? unplugin-auto-import, настройка...

С Nuxt 3:

npx nuxi@latest init my-app
cd my-app && npm install && npm run dev
# Готово! SSR, роутинг, авто-импорт, TypeScript — всё работает

---

Что такое мета-фреймворк? 🏗️

Браузер
   ↓
Vue 3 (UI Framework)
   ↓
Nuxt 3 (Meta-Framework)
   ├── Файловая маршрутизация
   ├── SSR / SSG / SPA / ISR
   ├── Авто-импорт
   ├── Nitro Server (API)
   ├── TypeScript из коробки
   └── Dev Experience

Мета-фреймворк добавляет соглашения и инфраструктуру поверх базового фреймворка. Тебе не нужно принимать тысячи решений — Nuxt принял их за тебя, оставив возможность переопределить любое.

---

Nitro — революционный сервер ⚡

Nitro — это сервер-движок Nuxt 3, написанный командой UnJS. Главная суперсила Nitro — универсальность:

# Nitro может деплоиться на:
✅ Node.js
✅ Vercel (Edge Functions)
✅ Cloudflare Workers
✅ AWS Lambda
✅ Deno Deploy
✅ Bun
✅ Netlify Functions
# Один код — любая платформа

Nitro также отвечает за:

• 📦 Bundling — умная сборка сервера
• 🗄️ Storage — абстракция над файловой системой/KV
• 🔄 Auto-import на сервере
• 💾 Caching — встроенное кэширование

---

UnJS экосистема 🌿

Nuxt 3 построен на UnJS — коллекции универсальных JavaScript пакетов:

Пакет	Роль	Пример
H3	HTTP сервер	defineEventHandler(event => 'hello')
ofetch	HTTP клиент	$fetch('/api/users')
defu	Слияние объектов	defu(userConfig, defaultConfig)
ufo	URL утилиты	joinURL('/api', 'users')
pathe	Пути	join('src', 'components')
consola	Логирование	consola.success('Server started')
jiti	TS/ESM рантайм	Запуск .ts файлов без сборки
nitropack	Сервер-бандлер	Компиляция Nitro приложений
mlly	ESM утилиты	Резолюция модулей

---

Нулевая конфигурация (Zero-Config) 🎯

Nuxt работает из коробки без единой строки конфига:

my-nuxt-app/
├── pages/
│   ├── index.vue      → /
│   └── about.vue      → /about
├── components/
│   └── MyButton.vue   → авто-импорт <MyButton>
├── composables/
│   └── useCounter.ts  → авто-импорт useCounter()
└── server/
    └── api/
        └── hello.ts   → GET /api/hello

При этом nuxt.config.ts позволяет настроить всё:

nuxt.config.ts

export default defineNuxtConfig({
  // Режим рендеринга
  ssr: true,

  // Tailwind CSS
  modules: ['@nuxtjs/tailwindcss'],

  // Runtime конфиг
  runtimeConfig: {
    apiSecret: process.env.API_SECRET,
    public: {
      apiBase: process.env.API_BASE_URL
    }
  },

  // Мета-теги для всего приложения
  app: {
    head: {
      title: 'My Nuxt App',
      meta: [
        { name: 'description', content: 'My amazing app' }
      ]
    }
  }
})

---

Авто-импорт — магия Nuxt ✨

Это самая обсуждаемая фича Nuxt. Понимание её принципа работы важно:

components/
  Button.vue           → <Button>
  ui/
    Card.vue           → <UiCard> или <Card>
    form/
      Input.vue        → <UiFormInput>

composables/
  useAuth.ts           → useAuth()
  utils/
    useFormat.ts       → useFormat()

utils/
  formatDate.ts        → formatDate()
  helpers/
    truncate.ts        → truncate()

Как это работает под капотом:

Nuxt сканирует директории при старте и генерирует .nuxt/imports.d.ts — файл с объявлениями типов для всех авто-импортированных сущностей. Vite плагин unplugin-auto-import добавляет настоящие импорты во время сборки.

// Ты пишешь:
const { data } = await useFetch('/api/users')

// Nuxt компилирует в:
import { useFetch } from '#imports'
const { data } = await useFetch('/api/users')

---

Гибридный рендеринг 🔄

Nuxt 3 поддерживает разные режимы рендеринга на каждый роут:

nuxt.config.ts

export default defineNuxtConfig({
  routeRules: {
    // Главная страница — статическая генерация
    '/': { prerender: true },

    // Блог — ISR (перегенерация каждые 10 минут)
    '/blog/**': { isr: 600 },

    // Дашборд — только клиент (SPA)
    '/dashboard/**': { ssr: false },

    // API с CORS заголовками
    '/api/**': { cors: true },

    // Страница с кэшированием
    '/products': { cache: { maxAge: 60 * 60 } },

    // Редирект
    '/old-page': { redirect: '/new-page' },
  }
})

---

Vue 3 внутри Nuxt 3 💚

Весь Vue 3 работает в Nuxt без изменений:

<script setup lang="ts">
// Composition API — работает
const count = ref(0)
const doubled = computed(() => count.value * 2)

// Vue Router через Nuxt composables
const route = useRoute()
const router = useRouter()

// Lifecycle hooks
onMounted(() => console.log('mounted'))
onUnmounted(() => console.log('unmounted'))

// Props и Emits
const props = defineProps<{
  title: string
  count?: number
}>()

const emit = defineEmits<{
  update: [value: number]
}>()
</script>

---

Nuxt vs Next.js 📊

Критерий	Nuxt 3 (Vue)	Next.js 14 (React)
Язык шаблонов	Vue SFC (.vue)	JSX/TSX
Реактивность	Vue Proxy (авто)	useState/hooks
Авто-импорт	✅ Встроен	❌ Ручной
Файловые роуты	✅ pages/	✅ app/ или pages/
Сервер	Nitro (универсальный)	Node.js/Edge
Server Components	🏝️ Nuxt Islands	✅ React Server Components
Стейт	Pinia / useState	Zustand / Redux / Context
Кривая обучения	🟢 Пологая	🟡 Средняя
Размер бандла	~100KB	~130KB
SEO из коробки	✅ useSeoMeta	✅ Metadata API
Edge Runtime	✅ Nitro	✅ Next.js Edge
Экосистема модулей	200+	1000+ (npm)
Компании	GitLab, Deezer	Vercel, Notion
Тренд	📈 Растёт	📈 Доминирует

Когда Nuxt лучше:

• Команда знает/любит Vue
• Нужен минимум конфигурации
• Важна читаемость шаблонов
• Full-stack с универсальным деплоем

Когда Next.js лучше:

• Команда React-ориентированная
• Нужны React Server Components
• Огромная экосистема компонентов
• Деплой на Vercel

---

История версий Nuxt 📅

Nuxt 1 (2016) — Vue 2, Webpack, SSR
     ↓
Nuxt 2 (2018) — Vue 2, Webpack 4, Vuex, лучший DX
     ↓
Nuxt Bridge (2021) — миграционный мост Nuxt 2→3
     ↓
Nuxt 3.0 (2022) — Vue 3, Vite, Nitro, Composition API
     ↓
Nuxt 3.x (2022-2024) — улучшения, Nuxt DevTools
     ↓
Nuxt 4 (2024) — новая структура папок, улучшения

---

Файловая структура Nuxt 3 📁

my-nuxt-app/
├── .nuxt/              ← Генерируется автоматически
├── .output/            ← Production build
├── assets/             ← CSS, шрифты, SVG (обрабатывает Vite)
├── components/         ← Vue компоненты (авто-импорт)
├── composables/        ← Vue composables (авто-импорт)
├── content/            ← Markdown файлы (@nuxt/content)
├── layouts/            ← Шаблоны страниц
├── middleware/          ← Route middleware
├── pages/              ← Страницы (файловый роутинг)
├── plugins/            ← Nuxt плагины
├── public/             ← Статические файлы (не обрабатывает Vite)
├── server/
│   ├── api/            ← API маршруты
│   ├── middleware/     ← Серверный middleware
│   ├── plugins/        ← Nitro плагины
│   └── utils/          ← Серверные утилиты
├── utils/              ← Клиентские утилиты (авто-импорт)
├── app.vue             ← Корневой компонент
├── error.vue           ← Страница ошибки
├── nuxt.config.ts      ← Конфигурация Nuxt
└── package.json

---

Runtime Config и ENV переменные 🔐

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    // Только сервер
    dbPassword: process.env.DB_PASSWORD,
    jwtSecret: process.env.JWT_SECRET,

    // Клиент + сервер
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api',
      appName: 'My App',
    }
  }
})

<script setup>
// Клиентский код
const config = useRuntimeConfig()
console.log(config.public.apiBase) // '/api'
// config.dbPassword — undefined на клиенте!
</script>

server/api/data.ts

export default defineEventHandler((event) => {
  const config = useRuntimeConfig(event)
  const secret = config.dbPassword // Доступно только здесь!
  // ...
})

---

DevTools 🛠️

Nuxt 3 поставляется с Nuxt DevTools — встроенным инструментом для разработки:

# DevTools включены по умолчанию в dev режиме
npm run dev
# Жми на логотип Nuxt в левом нижнем углу браузера

DevTools показывают:

• 📊 Все страницы и маршруты
• 🧩 Используемые компоненты
• 🪝 Composables и их использование
• 📦 Установленные модули
• 📡 Все API запросы
• 🎨 Tailwind/UnoCSS утилиты
• ⚡ Производительность

---