Nuxt 3: Обзор

Nuxt 3 — Full-Stack фреймворк для Vue 🟢

Добро пожаловать в мир Nuxt 3 — мощного мета-фреймворка поверх Vue 3, который превращает разработку современных веб-приложений в удовольствие! Забудь о бесконечных настройках — Nuxt делает всё за тебя.

---

Почему Nuxt 3? 🚀

Nuxt 3 — это не просто обёртка над Vue. Это полноценная платформа для создания:

• 🌐 SSR-приложений — рендеринг на сервере для SEO и быстрой загрузки
• ⚡ SSG-сайтов — статические страницы с мгновенной загрузкой
• 🏝️ SPA — классические одностраничные приложения
• 🔄 Гибридных — разные страницы с разными режимами рендеринга

Ключевые суперсилы Nuxt 3:

Возможность	Описание
🤖 Авто-импорт	Компоненты, composables, utils — всё импортируется автоматически
📂 Файловая маршрутизация	pages/about.vue → маршрут /about
🖥️ Nitro сервер	Встроенный универсальный сервер для API
🎯 Нулевой конфиг	Работает из коробки, настраивается постепенно
🔷 TypeScript	Полная поддержка из коробки
🧩 Модули	Экосистема из 200+ готовых модулей

---

Архитектура Nuxt 3 🏗️

┌─────────────────────────────────────────┐
│              Nuxt 3 App                  │
│                                         │
│  ┌──────────┐    ┌──────────────────┐   │
│  │  Vue 3   │    │   Nitro Server   │   │
│  │ (Client) │    │   (Server/API)   │   │
│  └────┬─────┘    └────────┬─────────┘   │
│       │                   │             │
│  ┌────▼─────────────────▼─────────┐     │
│  │         Vite / Rollup           │     │
│  │      (Build & Dev Server)       │     │
│  └─────────────────────────────────┘     │
│                                         │
│  ┌─────────────────────────────────┐    │
│  │    UnJS Ecosystem               │    │
│  │  H3 • ofetch • defu • pathe     │    │
│  └─────────────────────────────────┘    │
└─────────────────────────────────────────┘

---

UnJS — сердце экосистемы 💚

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

• H3 — минимальный HTTP-фреймворк (основа Nitro)
• ofetch — улучшенный fetch с интерцепторами
• defu — глубокое слияние объектов с дефолтами
• pathe — кросс-платформенные пути
• ufo — утилиты для URL
• consola — красивое логирование
• jiti — рантайм TypeScript/ESM

---

Магия авто-импортов ✨

Одна из главных фич Nuxt — автоматический импорт:

<!-- components/MyButton.vue существует -->
<template>
  <!-- Использую без импорта! -->
  <MyButton>Нажми меня</MyButton>
</template>

<script setup>
// Не нужно: import { ref } from 'vue'
// Не нужно: import { useRoute } from '#imports'
const route = useRoute()
const count = ref(0)
</script>

Nuxt авто-импортирует:

• Все компоненты из components/
• Все composables из composables/
• Все Vue 3 API (ref, computed, watch…)
• Nuxt composables (useFetch, useRoute, useState…)

---

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

nuxt.config.ts

export default defineNuxtConfig({
  routeRules: {
    '/':          { prerender: true },    // SSG
    '/blog/**':   { isr: 3600 },          // ISR (каждый час)
    '/app/**':    { ssr: false },          // SPA
    '/api/**':    { cors: true },          // API с CORS
  }
})

---

Таблица 25 уроков 📚

№	Урок	Тема	Сложность
1	introduction	Что такое Nuxt 3, архитектура, UnJS	🟢 Начало
2	setup	Установка, структура проекта	🟢 Начало
3	file-routing	Файловая маршрутизация, динамические роуты	🟢 Начало
4	layouts	Layouts, NuxtLayout, именованные слоты	🟡 Средне
5	components	Авто-импорт компонентов, Lazy, глобальные	🟡 Средне
6	composables	Composables, useState, useNuxtApp	🟡 Средне
7	data-fetching	useFetch, useAsyncData, $fetch	🟡 Средне
8	server-routes	Server API, H3, defineEventHandler	🟡 Средне
9	server-middleware	Server Middleware, CORS, логирование	🔴 Продвинуто
10	state-management	useState, Pinia в Nuxt	🟡 Средне
11	metadata-seo	useSeoMeta, useHead, Open Graph	🟡 Средне
12	rendering-modes	SSR/SSG/SPA/ISR, routeRules	🔴 Продвинуто
13	plugins	Плагины, $пространство имён	🔴 Продвинуто
14	modules	Nuxt модули, создание своих	🔴 Продвинуто
15	middleware	Route middleware, глобальный/именованный	🟡 Средне
16	error-handling	createError, showError, error.vue	🟡 Средне
17	authentication	Auth, cookies, сессии	🔴 Продвинуто
18	content-module	@nuxt/content, MDX, query	🟡 Средне
19	image-module	@nuxt/image, оптимизация	🟢 Начало
20	i18n	Интернационализация, @nuxtjs/i18n	🟡 Средне
21	testing	Vitest, @nuxt/test-utils, E2E	🔴 Продвинуто
22	performance	Lazy hydration, Islands, оптимизация	🔴 Продвинуто
23	deployment	Vercel, Netlify, Docker, Node.js	🟡 Средне
24	nuxt-vs-nextjs	Сравнение Nuxt и Next.js	🟢 Начало
25	nuxt4-features	Nuxt 4: новые возможности	🔴 Продвинуто

---

Быстрый старт 🏃

npx nuxi@latest init my-nuxt-app

# Переходим в папку
cd my-nuxt-app

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

# Запускаем dev-сервер
npm run dev

Уже на http://localhost:3000 — работающее Nuxt приложение!

---

Экосистема официальных модулей 🧩

@nuxt/content    — работа с markdown/MDX контентом
@nuxt/image      — оптимизация изображений
@nuxt/icon       — иконки из 200,000+ коллекций
@nuxt/ui         — UI компоненты (Tailwind-based)
@nuxt/fonts      — автоматические веб-шрифты
@pinia/nuxt      — Pinia state management
@nuxtjs/i18n     — интернационализация
@nuxtjs/sitemap  — автоматическая карта сайта
@nuxtjs/robots   — robots.txt
nuxt-auth-utils  — аутентификация

---

Готов погружаться? Начни с урока Что такое Nuxt 3 и шаг за шагом освой самый мощный Vue-фреймворк! 💚