Мой план по обучению Nuxt

Дмитрий Sadieff

Автор статьи

Пришло время разобраться в Nuxt.js глубже. На работе всё чаще появляются задачи, связанные с Nuxt, поэтому базовых знаний Vue и TypeScript уже недостаточно — хочется понимать фреймворк не только на уровне решения конкретных задач.

Базу по Vue и TypeScript я уже получил на курсах Дмитрия Лаврика. А вот полноценного курса по Nuxt у него сейчас нет: многие простые задачи всё чаще берут на себя AI-агенты, и спрос на такие курсы заметно снизился.

Поэтому решил самостоятельно пройти Nuxt с самого начала и разобраться в его основных возможностях и внутренних принципах. В этом мне помогли те же AI-агенты - с их помощью я составил программу обучения примерно на 12 часов.

Публикую свой вариант этого плана — возможно, он пригодится и тем, кто тоже хочет системно разобраться в Nuxt.js.

План обучения Nuxt.js: 12-20 часов

Формат: 24 урока × 30-45 минут
Структура урока: 10–15 минут теории + 15–25 минут практики + чек-лист.

Цель курса — выйти на средний уровень Nuxt.js и уметь самостоятельно разрабатывать и разворачивать среднее Nuxt-приложение.

Блок 1. Основы Nuxt

Урок 1. Что такое Nuxt и зачем он нужен

Теория

Разобраться:

чем Nuxt отличается от обычного Vue;
SSR, CSR, SSG — что это и когда используется;
структура Nuxt-приложения;
что происходит при открытии страницы;
зачем нужен Nitro;
что Nuxt дает поверх Vue.

Практика

Создать Nuxt-проект и сделать простые страницы:

/ — Главная;
/about — О проекте.

Посмотреть HTML, который приходит от сервера.

Чек-лист

Понимаю отличие Vue SPA от Nuxt. Понимаю SSR / CSR / SSG. Понимаю роль Nitro. Создал Nuxt-проект с нуля. Проверил HTML страницы через View Source.

Урок 2. Структура Nuxt-проекта

Теория

Разобрать:

app/
components/
composables/
layouts/
middleware/
pages/
plugins/
server/
public/
assets/
nuxt.config.ts

Что где должно находиться и почему.

Практика

Создать структуру:

pages/
  index.vue
  about.vue

components/
  AppHeader.vue
  AppFooter.vue

layouts/
  default.vue

Подключить layout и компоненты.

Чек-лист

Знаю назначение основных директорий. Понимаю auto-import. Создал layout. Создал несколько компонентов. Понимаю разницу assets и public.

Урок 3. Pages и routing

Теория

Изучить:

file-based routing;
динамические маршруты;
вложенные маршруты;
catch-all маршруты;
параметры маршрута;
navigateTo;
useRoute.

Например:

pages/
  blog/
    index.vue
    [slug].vue

Практика

Сделать мини-блог:

/blog
/blog/hello-nuxt
/blog/ssr
/blog/vue

Показывать slug на странице.

Чек-лист

Понимаю file-based routing. Создал динамический маршрут. Получаю route.params. Использовал navigateTo. Сделал вложенные страницы.

Урок 4. Layouts, ошибки и страницы состояния

Теория

Разобрать:

layouts;
error.vue;
createError;
showError;
clearError;
404;
loading/error состояния.

Практика

Сделать:

общий layout;
страницу ошибки;
404;
кнопку возврата на главную.

Чек-лист

Понимаю layouts. Создал error.vue. Умею программно вызвать ошибку. Обработал 404. Понимаю разницу error и обычного состояния компонента.

Блок 2. Routing и данные

Урок 5. `useFetch`

Теория

Изучить useFetch() и понять:

SSR-fetching;
hydration;
data;
error;
status;
pending;
lazy;
server.

Практика

Подключить публичный API:

https://jsonplaceholder.typicode.com/posts

Вывести список постов.

Чек-лист

Понимаю useFetch. Понимаю SSR-fetch. Обработал loading. Обработал error. Получил данные на сервере.

Урок 6. `$fetch` и `useAsyncData`

Теория

Разобрать различия:

$fetch()
useFetch()
useAsyncData()

Главный вопрос — когда использовать каждый вариант.

Практика

Одну и ту же задачу реализовать двумя способами:

const { data } = await useAsyncData(...)

и:

const data = await $fetch(...)

Сравнить поведение при SSR.

Чек-лист

Знаю отличие $fetch. Знаю отличие useFetch. Знаю, когда нужен useAsyncData. Понимаю проблему двойного запроса. Могу выбрать подходящий способ самостоятельно.

Урок 7. Query params и фильтрация

Теория

Разобрать:

useRoute()
navigateTo()
useRouter()

и работу с URL:

/products?page=2&sort=price

Практика

Сделать страницу товаров:

/products?page=1
/products?page=2

Добавить сортировку и фильтр.

Чек-лист

Работаю с query params. Изменяю URL без ручного window. Сохраняю состояние фильтров в URL. Понимаю реактивность route query.

Урок 8. Динамические страницы + реальные данные

Теория

Связать routing и API:

URL
 ↓
route.params
 ↓
API
 ↓
data
 ↓
page

Практика

Создать полноценную страницу:

/blog/[slug]

с загрузкой статьи по slug.

Чек-лист

Получаю slug. Загружаю данные на сервере. Обрабатываю ошибку. Показываю loading. Есть 404 для отсутствующей статьи.

Блок 3. Server-side Nuxt

Это один из самых важных блоков для перехода от Vue-разработчика к Nuxt-разработчику.

Урок 9. Nitro и server directory

Теория

Разобрать:

server/
  api/
  routes/
  middleware/
  utils/

Что такое Nitro и зачем Nuxt содержит backend.

Практика

Создать endpoint:

/api/posts

который возвращает JSON.

Чек-лист

Понимаю Nitro. Знаю назначение server. Создал server API. Получаю JSON через $fetch.

Урок 10. API endpoints

Теория

Изучить:

defineEventHandler()
getQuery()
readBody()
getRouterParam()

Методы:

GET
POST
PUT
DELETE

Практика

Сделать CRUD:

GET    /api/posts
GET    /api/posts/:id
POST   /api/posts
PUT    /api/posts/:id
DELETE /api/posts/:id

Можно пока хранить данные в памяти.

Чек-лист

Создал GET endpoint. Создал POST endpoint. Получаю body. Получаю params. Реализовал CRUD.

Урок 11. Server middleware и авторизация

Теория

Изучить:

server/middleware

и cookies.

Понять архитектуру:

Browser
   ↓
Nuxt
   ↓
Server middleware
   ↓
API

Практика

Сделать условную авторизацию:

POST /api/login
GET  /api/profile
POST /api/logout

Сохранять токен в cookie.

Чек-лист

Понимаю server middleware. Умею читать cookies. Умею устанавливать cookies. Реализовал login/logout. Закрыл API от неавторизованных запросов.

Урок 12. Runtime Config и переменные окружения

Теория

Разобрать:

runtimeConfig

и:

.env
NUXT_

Понять:

что можно отдавать клиенту;
что должно оставаться только на сервере;
где хранить API keys.

Практика

Добавить:

API_SECRET=
API_URL=

И использовать секрет только на сервере.

Чек-лист

Понимаю runtime config. Отличаю public/private config. Понимаю .env. Не отдаю секрет клиенту. Использую config вместо хардкода.

Блок 4. Архитектура Nuxt-приложения

Урок 13. Composables

Теория

Разобрать auto-import и composables.

Например:

useAuth()
useApi()
useProducts()

Понять, что туда помещать, а что не помещать.

Практика

Создать:

useAuth()
useProducts()

и вынести туда общую логику.

Чек-лист

Понимаю composables. Создал собственный composable. Использую auto-import. Не складываю UI в composables. Умею отделять бизнес-логику от компонентов.

Урок 14. Plugins

Теория

Изучить:

plugins/

и:

defineNuxtPlugin()

Когда plugin нужен, а когда достаточно composable.

Практика

Создать небольшой plugin, например:

$api

для централизованной работы с API.

Чек-лист

Понимаю назначение plugins. Создал plugin. Понимаю client/server plugins. Умею передавать сервис через Nuxt app. Понимаю отличие plugin от composable.

Урок 15. Middleware маршрутов

Теория

Разобрать:

middleware/
  auth.ts
  guest.ts

и:

defineNuxtRouteMiddleware()

Виды:

global
named

Практика

Сделать:

/login
/dashboard
/profile

/dashboard доступен только авторизованному пользователю.

Чек-лист

Понимаю route middleware. Создал auth middleware. Понимаю global middleware. Перенаправляю пользователя. Различаю client/server middleware.

Урок 16. Состояние приложения

Теория

Разобрать:

useState()

и сравнить его с Pinia.

Когда достаточно:

useState('user')

а когда нужна полноценная store-архитектура.

Практика

Создать:

useState('user')
useState('cart')

и связать их между несколькими страницами.

Чек-лист

Понимаю useState. Понимаю SSR-friendly state. Могу объяснить отличие от обычного ref. Понимаю, когда использовать Pinia. Создал глобальное состояние.

Блок 5. SEO, производительность и production

Урок 17. SEO в Nuxt

Теория

Изучить:

useHead()
useSeoMeta()

Разобрать:

title
description
og:title
og:description
og:image
canonical

Практика

Сделать динамические SEO-метаданные для:

/blog/[slug]

Чек-лист

Умею задавать title. Умею задавать description. Умею создавать Open Graph. SEO зависит от данных страницы. Проверил полученный HTML.

Урок 18. SSR / SSG / prerender

Теория

Глубже разобраться в:

SSR
SSG
prerender

и понять, какой подход выбирать под разные проекты.

Практика

Сделать:

/blog

статически генерируемой страницей.

Проверить результат после build.

Чек-лист

Понимаю SSR. Понимаю SSG. Понимаю prerender. Знаю плюсы и минусы каждого режима. Проверил production build.

Урок 19. Performance

Теория

Разобрать:

lazy components;
lazy routes;
image optimization;
code splitting;
payload;
hydration;
<ClientOnly>.

Особенно важно понять hydration.

Практика

Взять предыдущий проект и:

вынести тяжелый компонент в lazy;
использовать <ClientOnly>;
оптимизировать изображения;
проверить HTML и JS bundle.

Чек-лист

Понимаю hydration. Знаю, когда нужен <ClientOnly>. Использовал lazy component. Оптимизировал изображения. Понимаю code splitting.

Урок 20. Caching и производительность server API

Теория

Изучить:

кеширование;
cachedEventHandler;
HTTP cache;
server-side cache;
Nitro storage.

Практика

Для:

/api/posts

сделать кеширование ответа.

Сравнить первый запрос и последующие.

Чек-лист

Понимаю зачем нужен server cache. Знаю cachedEventHandler. Различаю browser cache и server cache. Добавил кеширование. Понимаю, когда кеш вреден.

Блок 6. Production и итоговый проект

Урок 21. Конфигурация проекта

Теория

Разобрать:

nuxt.config.ts

Важные настройки:

modules
runtimeConfig
devtools
css
vite
nitro
routeRules

Особенно:

routeRules

Практика

Настроить разные правила для:

/
/blog/**
/admin/**
/api/**

Например, кеширование или prerender.

Чек-лист

Уверенно ориентируюсь в nuxt.config.ts. Понимаю runtimeConfig. Понимаю routeRules. Настроил разные правила для маршрутов. Понимаю роль Vite внутри Nuxt.

Урок 22. Deployment

Теория

Разобрать жизненный цикл:

development
↓
build
↓
production

Команды:

npm run dev
npm run build
npm run preview

Изучить:

.output/

и варианты размещения Nuxt:

Node server;
Docker;
serverless;
static hosting.

Практика

Собрать проект:

npm run build

и запустить production-версию.

Чек-лист

Понимаю production build. Знаю назначение .output. Запустил production Nuxt. Понимаю Node deployment. Понимаю отличие static от server deployment.

Урок 23. Архитектура полноценного Nuxt-приложения

Теория

Разобрать архитектуру:

pages
   ↓
components
   ↓
composables
   ↓
services
   ↓
server/api
   ↓
database

Ответить на вопросы:

где должна находиться бизнес-логика;
где делать API;
где хранить состояние;
где использовать composable;
где plugin;
где middleware;
как избежать «god component».

Практика

Спроектировать структуру проекта до написания кода:

pages/
components/
composables/
services/
stores/
server/
  api/
  services/
  repositories/

Не превращать composables в место для всей бизнес-логики.

Чек-лист

Могу самостоятельно спроектировать структуру Nuxt. Понимаю границы ответственности. Отличаю component/composable/service. Отличаю frontend API/service/server service. Не смешиваю UI и бизнес-логику.

Урок 24. Итоговый проект

Последнее занятие — сборка всего изученного вместе.

Проект

Сделать небольшое Nuxt-приложение каталога статей:

/
 /articles
 /articles/[slug]
 /login
 /profile
 /admin

Что должно быть

Frontend:

pages;
dynamic routing;
layouts;
components;
composables;
useState или Pinia;
useFetch.

Backend:

/api/auth/login
/api/auth/logout
/api/auth/me
/api/articles
/api/articles/:slug

Также:

middleware;
cookies;
runtime config;
SEO;
Open Graph;
SSR;
обработка 404;
loading/error;
кеширование;
production build.

Итоговый чек-лист

Результат обучения

После прохождения курса необходимо уверенно понимать:

Vue 3
  ↓
Nuxt
  ├── Pages / Routing
  ├── SSR / SSG
  ├── useFetch / useAsyncData
  ├── SEO
  ├── Middleware
  ├── Composables
  ├── Plugins
  ├── State
  ├── Nitro
  │    └── API
  ├── Runtime Config
  ├── Caching
  └── Deployment

Цель — не просто знать API Nuxt, а уметь самостоятельно разработать и развернуть среднее Nuxt-приложение без постоянного обращения к документации за базовыми вещами.

Особый акцент стоит сделать на концепциях, которые принципиально отличаются от обычной Vue-разработки:

SSR;
hydration;
data fetching;
Nitro;
server-side API;
middleware;
runtime config;
SEO;
production deployment.

8 сентября 2026

При создании материалов частично использовались инструменты искусственного интеллекта. AI

Мой план по обучению Nuxt

План обучения Nuxt.js: 12-20 часов

Блок 1. Основы Nuxt

Урок 1. Что такое Nuxt и зачем он нужен

Теория

Практика

Чек-лист

Урок 2. Структура Nuxt-проекта

Теория

Практика

Чек-лист

Урок 3. Pages и routing

Теория

Практика

Чек-лист

Урок 4. Layouts, ошибки и страницы состояния

Теория

Практика

Чек-лист

Блок 2. Routing и данные

Урок 5. useFetch

Теория

Практика

Чек-лист

Урок 6. $fetch и useAsyncData

Теория

Практика

Чек-лист

Урок 7. Query params и фильтрация

Теория

Практика

Чек-лист

Урок 8. Динамические страницы + реальные данные

Теория

Практика

Чек-лист

Блок 3. Server-side Nuxt

Урок 9. Nitro и server directory

Теория

Практика

Чек-лист

Урок 10. API endpoints

Теория

Практика

Чек-лист

Урок 11. Server middleware и авторизация

Теория

Практика

Чек-лист

Урок 12. Runtime Config и переменные окружения

Теория

Практика

Чек-лист

Блок 4. Архитектура Nuxt-приложения

Урок 13. Composables

Теория

Практика

Чек-лист

Урок 14. Plugins

Теория

Практика

Чек-лист

Урок 15. Middleware маршрутов

Теория

Практика

Чек-лист

Урок 16. Состояние приложения

Теория

Практика

Чек-лист

Блок 5. SEO, производительность и production

Урок 17. SEO в Nuxt

Теория

Практика

Чек-лист

Урок 18. SSR / SSG / prerender

Теория

Практика

Чек-лист

Урок 19. Performance

Урок 5. `useFetch`

Урок 6. `$fetch` и `useAsyncData`