Stepik О курсе
Подробнее
В этом курсе мы познакомимся с Nuxt — веб-фреймворком на Vue. Курс будет максимально практическим, так как мы всё будем изучать, создавая интернет-магазин и сразу применяя полученные знания на практике. Для проекта подготовлено множество макетов и готовое API, которое вы сможете запустить локально.
Мы начнём с создания нового проекта, настроим layout и разберёмся с роутингом. Далее погрузимся в Universal Rendering, посмотрим, как он работает, что такое гидратация и чем SSR отличается от CSR.
После этого изучим PostCSS, работу со стилями и анимацию смены страниц, посмотрим, как работать с состоянием в SSR и подключим Pinia. Затем перейдём к более продвинутым темам, таким как авторизация в Nuxt, SEO, мета-теги и OpenGraph. В конце курса рассмотрим backend-составляющую Nuxt, создадим простое API и сохраним данные пользователя в базу данных.
Требования
Что нужно для старта
- Знание Vue.js, Знание TypeScript
Результат
Что вы получите
- Создавать Nuxt-приложения с нуля
- Настраивать SSR и SSG
- Работать с файловым роутингом
- Разрабатывать переиспользуемые композаблы
- Настраивать middleware и плагины
- Интегрировать внешние API
- Оптимизировать SEO и производительность
- Работать с модулями экосистемы
- Развертывать приложения в продакшен
Аудитория
Для кого этот курс
- Для frontend-разработчиков, которые знакомы с Vue
Содержание
13 занятийПрограмма курса
№ТемаЧто внутри
01Введение
- Nuxt
- Как устроен курс
- Обзор проекта
- Рекомендуемый курс
- Перенос курса
02Настройка окружения
- Настройка окружения
- Установка Node
- Настройки VSCode
- Создание проекта
03Структура проекта
- Обзор проекта
- Автоимпорт
- Вложенные компоненты
- Настройка автоимпортов
- App configuration
- Environment vars
- Тест - Структура проекта
04Роутинг
- Добавление страниц
- Программный роутинг
- NuxtLink и prefetch
- Перенаправление
- Страница ошибки
- Nuxt Font и стили
- Упражнение - Компонент кнопки
- Упражнение - Стилизация страницы ошибки
- Структура путей
- Динамические пути
- Тест - Роутинг
05Layout
- Default Layout
- Custom Layout
- Упражнение - Input
- Добавление иконок
- NuxtIcon
- Упражнение - Вёрстка Footer
- Стилизация иконок
- Упражнение - Шапка
- Состояние ссылок
- Тест - Layout
06Server Side Rendering
- Universal Rendering
- Пример рендера
- Client Side Rendering
- ClientOnly
- Жизненный цикл Nuxt
- Hybrid Rendering
- Тест - Server Side Rendering
07Стилизация и анимация
- CSS модули
- Postcss
- Page Transitions
- Внешние стили
- Tailwind
- Тест - Стилизация и анимация
08Получение данных
- Развёртка API
- Запросы в Insomnia
- $fetch
- useFetch
- Ограничения useFetch
- Refresh данных
- useAsyncData
- Упражнение - Select
- Вывод категорий в каталоге
- Упражнение - Карточка товара
- v-bind стилей
- Упражнение - Данные товаров
- Тест - Получение данных
09Работа с состоянием
- Повторный запрос данных
- Хранение состояния с SSR
- Упражнение - Поиск по каталогу
- useDebounce
- Добавление Pinia
- Store для избранного
- callOnce
- Добавление в избранное
- Persisted State
- Упражнение - Отображение избранного
- Тест - Работа с состоянием
10Авторизация
- Форма авторизации
- Получение JWT
- Упражнение - State авторизации
- Middleware
- Глобальный middleware
- Упражнение - Выход пользователя
- Тест - Авторизация
11SEO и Metadata
- Default head и favicon
- useHead и useSeoMeta
- Динамический title
- Title template
- Sitemap
- Robots txt
- Nuxt DevTools
- Тест - SEO и Metadata
12Server endpoints
- Server Middleware
- Server routes
- Body Query Params
- Подключение базы данных
- Сохранение данных
- Интеграция с frontend
- Упражнение - Получение данных
- Тест - Server endpoints
13Заключение
- Куда двигаться дальше?
- Финальное тестирование
01Введение
- Nuxt
- Как устроен курс
- Обзор проекта
- Рекомендуемый курс
- Перенос курса
02Настройка окружения
- Настройка окружения
- Установка Node
- Настройки VSCode
- Создание проекта
03Структура проекта
- Обзор проекта
- Автоимпорт
- Вложенные компоненты
- Настройка автоимпортов
- App configuration
- Environment vars
- Тест - Структура проекта
04Роутинг
- Добавление страниц
- Программный роутинг
- NuxtLink и prefetch
- Перенаправление
- Страница ошибки
- Nuxt Font и стили
- Упражнение - Компонент кнопки
- Упражнение - Стилизация страницы ошибки
- Структура путей
- Динамические пути
- Тест - Роутинг
05Layout
- Default Layout
- Custom Layout
- Упражнение - Input
- Добавление иконок
- NuxtIcon
- Упражнение - Вёрстка Footer
- Стилизация иконок
- Упражнение - Шапка
- Состояние ссылок
- Тест - Layout
06Server Side Rendering
- Universal Rendering
- Пример рендера
- Client Side Rendering
- ClientOnly
- Жизненный цикл Nuxt
- Hybrid Rendering
- Тест - Server Side Rendering
07Стилизация и анимация
- CSS модули
- Postcss
- Page Transitions
- Внешние стили
- Tailwind
- Тест - Стилизация и анимация
08Получение данных
- Развёртка API
- Запросы в Insomnia
- $fetch
- useFetch
- Ограничения useFetch
- Refresh данных
- useAsyncData
- Упражнение - Select
- Вывод категорий в каталоге
- Упражнение - Карточка товара
- v-bind стилей
- Упражнение - Данные товаров
- Тест - Получение данных
09Работа с состоянием
- Повторный запрос данных
- Хранение состояния с SSR
- Упражнение - Поиск по каталогу
- useDebounce
- Добавление Pinia
- Store для избранного
- callOnce
- Добавление в избранное
- Persisted State
- Упражнение - Отображение избранного
- Тест - Работа с состоянием
10Авторизация
- Форма авторизации
- Получение JWT
- Упражнение - State авторизации
- Middleware
- Глобальный middleware
- Упражнение - Выход пользователя
- Тест - Авторизация
11SEO и Metadata
- Default head и favicon
- useHead и useSeoMeta
- Динамический title
- Title template
- Sitemap
- Robots txt
- Nuxt DevTools
- Тест - SEO и Metadata
12Server endpoints
- Server Middleware
- Server routes
- Body Query Params
- Подключение базы данных
- Сохранение данных
- Интеграция с frontend
- Упражнение - Получение данных
- Тест - Server endpoints
13Заключение
- Куда двигаться дальше?
- Финальное тестирование
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Nuxt — fullstack Vue фреймворк» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 3 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
