Веб-разработка

Учебник Nuxt для начинающих

23 урока · 6 разделов · бесплатно, без регистрации

Начать с первого урока

Полный премиум-курс по Nuxt — мета-фреймворку над Vue, который превращает библиотеку для интерфейсов в полноценный фулстек-инструмент. Вы пройдёте путь от понимания серверного рендеринга до выката готового приложения в продакшен.

Сначала разберёмся, чем SSR отличается от SPA и как работает гидратация, затем освоим файловую маршрутизацию: динамические роуты, макеты и middleware. Дальше — компоненты и composables, обмен данными через props и события, SSR-безопасное состояние useState. Отдельный раздел посвящён получению данных: useFetch, useAsyncData и $fetch — когда какой нужен и как избежать двойных запросов.

Затем превратим Nuxt в фулстек: напишем серверный API на движке Nitro, разберём HTTP-методы, валидацию и безопасность. Финал — SEO через useSeoMeta, гибридный рендеринг через routeRules и деплой с пресетами Nitro на Node, Vercel или Netlify. Каждый урок снабжён ASCII-схемами и запускаемыми JS-врезками, моделирующими внутреннюю механику Nuxt.

Курс «Nuxt: фулстек на Vue» состоит из 6 разделов и 23 уроков: Введение: Nuxt, SSR и SPA, Страницы и маршрутизация, Компоненты и composables, Данные: useFetch и useAsyncData, Server API и Nitro и Деплой и SEO. Уроки идут по порядку — от основ к более сложным темам, в каждом есть объяснение с примерами, а в конце — вопросы для самопроверки. К урокам привязаны задачи с автоматической проверкой: прочитали тему — сразу закрепили её кодом.

Программа курса

  1. 1 Введение: Nuxt, SSR и SPA

    1. Что такое Nuxt и зачем он Vue

      Что такое Nuxt — мета-фреймворк над Vue: SSR, файловая маршрутизация, авто-импорты и Nitro. Зачем брать Nuxt вместо чистого Vue.

    2. SSR против SPA: два мира рендеринга

      SSR против SPA в Nuxt: где рендерится HTML, как это влияет на скорость первой отрисовки, SEO и нагрузку. ASCII-схема потока запроса.

    3. Гидратация: как оживает страница

      Гидратация в Nuxt: как сервер передаёт состояние клиенту через payload, что такое hydration mismatch и почему он ломает страницу.

    4. Структура проекта Nuxt

      Структура Nuxt-проекта: папки pages, components, composables, server, layouts, plugins и файл nuxt.config. Соглашения вместо конфигурации.

  2. 2 Страницы и маршрутизация

    1. Файловая маршрутизация: pages в роуты

      Файловая маршрутизация Nuxt: как файлы в pages превращаются в URL, index.vue, вложенные папки и NuxtPage. ASCII-схема pages -> роуты.

    2. Динамические маршруты и параметры

      Динамические маршруты Nuxt: квадратные скобки [id], useRoute и params, catch-all [...slug]. Один шаблон для тысяч страниц.

    3. Макеты (layouts) и навигация

      Layouts в Nuxt: общая шапка и подвал через default.vue и slot, выбор макета через definePageMeta, переходы по NuxtLink без перезагрузки.

    4. Middleware: проверки перед переходом

      Route middleware в Nuxt: defineNuxtRouteMiddleware, navigateTo и abortNavigation для защиты страниц, глобальные и именованные middleware.

  3. 3 Компоненты и composables

    1. Авто-импорт компонентов и функций

      Авто-импорты Nuxt: компоненты из components и функции из composables доступны без import, правила именования по папкам, плюсы и грабли.

    2. Props, события и v-model

      Обмен данными между компонентами Nuxt и Vue: props вниз через defineProps, события вверх через defineEmits и emit, двусторонняя связь v-model.

    3. Composables: переиспользуемая логика

      Composables в Nuxt: вынос логики в функции useXxx с собственным реактивным состоянием через ref и computed, паттерн замыкания, авто-импорт.

    4. useState: общее состояние с SSR

      useState в Nuxt: SSR-совместимое общее состояние с ключом, почему обычный ref модуля опасен на сервере, передача состояния в payload.

  4. 4 Данные: useFetch и useAsyncData

    1. useFetch: данные без двойных запросов

      useFetch в Nuxt: загрузка данных при SSR без двойного запроса, состояния data/pending/error, передача результата через payload.

    2. useAsyncData: гибкая загрузка

      useAsyncData в Nuxt: когда нужен вместо useFetch — несколько источников, SDK, трансформация ответа; ключ кеша, transform и lifecycle.

    3. $fetch: запросы по событиям

      $fetch в Nuxt: императивные запросы по событиям (отправка формы, кнопка), почему его нельзя звать в setup при SSR, мутации POST.

    4. Загрузка, ошибки и обновление данных

      Управление загрузкой данных в Nuxt: pending/status, error и createError, refresh для перезапроса, lazy и watch для реактивных параметров.

  5. 5 Server API и Nitro

    1. Server routes и Nitro: бэкенд внутри Nuxt

      Server routes в Nuxt: папка server/api, defineEventHandler, авто-префикс /api, движок Nitro как встроенный бэкенд для фулстека.

    2. HTTP-методы и динамические эндпоинты

      HTTP-методы в server routes Nuxt: суффиксы .get/.post/.delete, динамические параметры [id] и getRouterParam, чтение тела через readBody.

    3. Серверное middleware, валидация и безопасность

      Безопасность server routes Nuxt: серверное middleware из server/middleware, валидация входных данных, секреты через runtimeConfig, статусы ошибок.

  6. 6 Деплой и SEO

    1. SEO в Nuxt: useSeoMeta и useHead

      SEO в Nuxt: управление title и meta-тегами через useSeoMeta и useHead, Open Graph для соцсетей, динамические мета-теги на серверном рендере.

    2. Стратегии рендеринга: SSR, SSG, ISR и routeRules

      Стратегии рендеринга Nuxt: SSR, статика SSG (prerender), ISR и SWR через routeRules, выбор режима на каждый маршрут отдельно.

    3. Конфигурация, переменные окружения и оптимизация

      Конфигурация Nuxt перед деплоем: nuxt.config и runtimeConfig, переменные окружения и .env, public vs приватные, оптимизация бандла и lazy-компоненты.

    4. Сборка и деплой: от .output до прода

      Деплой Nuxt: nuxt build и папка .output, режим Node-сервера против статики nuxt generate, пресеты Nitro под Vercel/Netlify/Node, проверка прода.