В этом курсе мы познакомимся с Nuxt — веб-фреймворком на Vue. Курс будет максимально практическим, так как мы всё будем изучать, создавая интернет-магазин и сразу применяя полученные знания на практике. Для проекта подготовлено множество макетов и готовое API, которое вы сможете запустить локально.
Мы начнём с создания нового проекта, настроим layout и разберёмся с роутингом. Далее погрузимся в Universal Rendering, посмотрим, как он работает, что такое гидратация и чем SSR отличается от CSR.
После этого изучим PostCSS, работу со стилями и анимацию смены страниц, посмотрим, как работать с состоянием в SSR и подключим Pinia. Затем перейдём к более продвинутым темам, таким как авторизация в Nuxt, SEO, мета-теги и OpenGraph. В конце курса рассмотрим backend-составляющую Nuxt, создадим простое API и сохраним данные пользователя в базу данных.
После прохождения курса вы сможете:
- Создавать Nuxt-приложения с нуля
- Настраивать SSR и SSG
- Работать с файловым роутингом
- Разрабатывать переиспользуемые композаблы
- Настраивать middleware и плагины
- Интегрировать внешние API
- Оптимизировать SEO и производительность
- Работать с модулями экосистемы
- Развертывать приложения в продакшен
Программа курса
01. Введение
- Nuxt
- Как устроен курс
- Обзор проекта
- Работа на платформе
- Проект домашнего задания
- AI и тренажёры
- Практика на проекте
- Рекомендуемый курс
02. Настройка окружения
- Настройка окружения
- Установка Node
- Настройки VSCode
- Создание проекта
- Домашнее задание AI
03. Структура проекта
- Обзор проекта
- Автоимпорт
- Вложенные компоненты
- Настройка автоимпортов
- App configuration
- Environment vars
- Тест — Структура проекта
04. Роутинг
- Добавление страниц
- Программный роутинг
- NuxtLink и prefetch
- Перенаправление
- Страница ошибки
- Nuxt Font и стили
- Упражнение — Компонент кнопки
- Упражнение — Стилизация страницы ошибки
- Структура путей
- Динамические пути
- Тест — Роутинг
05. Layout
- Default Layout
- Custom Layout
- Упражнение — Input
- Добавление иконок
- NuxtIcon
- Упражнение — Вёрстка Footer
- Стилизация иконок
- Упражнение — Шапка
- Состояние ссылок
- Тест — Layout
06. Server 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
- Упражнение — Выход пользователя
- Тест — Авторизация
11. SEO и Metadata
- Default head и favicon
- useHead и useSeoMeta
- Динамический title
- Title template
- Sitemap
- Robots txt
- Nuxt DevTools
- Тест — SEO и Metadata
12. Server endpoints
- Server Middleware
- Server routes
- Body Query Params
- Подключение базы данных
- Сохранение данных
- Интеграция с frontend
- Упражнение — Получение данных
- Тест — Server endpoints
13. Заключение
- Куда двигаться дальше?
- Финальное тестирование
