phone_picture

Цель курса

Разобраться с главными темами фреймворка Nuxt и научиться создавать SPA, поддерживающие Server Side Rendering, с минимальными трудозатратами для программиста
(по сравнению с реализацией SSR с нуля на чистом Vue).

Мы хотим организовать тренировку, приближенную к реальности, и поэтому сразу подключаем Vuetify, изучаем её компоненты и прощупываем проблемы UI-библиотек при SSR.

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

урок 1

  • Знакомство с Nuxt, работа с Nuxi
  • Процесс разработки и концепция автоимпорта
  • Структура директорий и основные части системы
  • Простой роутинг, страницы и компоненты
  • Плагины и middleware
  • Настройки в nuxt.config

урок 2

  • Выбор UI, установка Vuetify 3 в Nuxt
  • Базовые концепции Vuetify
  • Конфигурация и стили
  • Application layout
  • Основные UI-компоненты
  • Правильное подключение иконок

урок 3

  • SSR и гидратация SPA
  • Проблема асинхронных операций
  • Работа с данными в Nuxt
  • useFetch, useAsyncData и $fetch
  • Создание обёртки $appFetch
  • Нюансы плагинов: setup, dependsOn, provide

урок 4

  • Авторизация: pinia и auth store
  • Роутинг и вложенные маршруты
  • Мета-данные маршрутов и definePageMeta
  • Разработка Auth-middleware
  • $appFetch: авторизация и 401-ые ошибки
  • Отключение SSR для закрытых страниц

урок 5

  • Создание страницы входа на сайт
  • Работа с формами
  • Создание composable useForm
  • Обработка 422-ых ошибок
  • Layouts для клиентской части и админ-панели

урок 6

  • Разработка функционала админки
  • Взаимодействие с backend-api
  • Api и паттерн repository
  • Умеренное погружение в TypeScript
  • Скрытая папка .nuxt и магия типов

урок 7

  • Режимы генерации контента
  • Пререндеринг vs SSR
  • SSR и фокусы UI-библиотек
  • Работа с SEO-тегами
  • AsyncData и динамические метатеги

урок 8

  • Доработка SPA
  • Развёртывание на VDS
  • Node.js и pm2
  • Nginx reverse proxy
  • Проверка Core Web Vitals с SSR и без

Преподаватель курса

Дмитрий Лаврик

Профессиональный веб-разработчик

Опыт работы в сфере разработки сайтов более 15 лет. Ориентируется во всех вопросах создания сайтов, от вёрстки до backend-а.

Опытный преподаватель

Начиная с 2011 года, под его руководством тысячи учеников прошли путь от новичков до успешных веб-программистов. Если вы ещё не знакомы с Дмитрием, рекомендуем заглянуть на его youtube-канал, где вы найдете много полезных видео и сможете узнать стиль преподавания Дмитрия.

Дмитрий Лаврик

Что вы получите

Видеозаписи всех уроков

В хорошем качестве с возможностью скачать видео. Продолжительность каждого занятия около двух часов. На уроках разбираются домашние работы учеников и новый материал.

Материалы и исходники

Все примеры, которые мы рассматриваем на уроках, вы получаете в архиве. Таким образом, даже не написав ни строчки кода, вы получаете набор готовых решений, сделанных на уроке.

Доступ в закрытую группу

Во время прохождения курса и после его завершения участники тусуются в рамках закрытой площадки, где помогают друг другу, а также задают вопросы преподавателю и получают ответы на них.

Обзор курса

Внимание! Для эффективного прохождения курса необходим хотя бы небольшой опыт создания SPA на Vue.

Если вы хотите ознакомиться с мыслями автора о курсе,

посмотрите видео, расположенное рядом

В нём подробно рассматривается программа курса, и даются рекомендации по необходимым начальным знаниям.

Запись на курс

Доступно в формате видеозаписей

с потока мая 2025

21 000 руб. 10 500 руб.

Хотите цену ещё лучше?
Летняя акция!
 
Способы оплаты

Часто задаваемые вопросы

Какой начальный уровень знаний необходим

Хотя бы небольшой опыт создания SPA на Vue, понимание Composition Api, Vue Router, Pinia, взаимодействие с сервером ( axios / fetch ).

Обязательно ли прохождение Vue / Vue Level 2

Если вы уверенно применяете технологии, перечисленные в предыдущем пункте, можете участвовать без прохождения курсов по Vue.

Актуальная ли программа, ведь вышел Nuxt 4

Актуальна. Дело в том, что мы специально писали код в режиме совместимости с 4 версией. Под капотом в курсе nuxt 3.17.4, но кодовая база полностью совместима с 4 версией.

Пишем на TypeScript или чистом JS

Планируется TypeScript на минималках - все сложные типы nuxt выводит сам, а мы пишем почти как на чистом js. Если вы ни разу не применяли TS, то хватит пары часов, чтобы привыкнуть к синтаксису и освоить простейшие типы.