[Дмитрий Лаврик] Nuxt - интенсивный базовый курс (2024)

[Дмитрий Лаврик] Nuxt - интенсивный базовый курс (2024)

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

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

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

29 мая, 20:00 — урок 1

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

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

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

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

Создание страницы входа на сайт
Работа с формами
Создание composable useForm
Обработка 422-ых ошибок
Layouts для клиентской части и админ-панели
16 июня, 20:00 — урок 6

Разработка функционала админки
Взаимодействие с backend-api
Api и паттерн repository
Умеренное погружение в typescript
Скрытая папка .nuxt и магия типов
19 июня, 20:00 — урок 7

Режимы генерации контента
Пререндеринг vs SSR
SSR и фокусы UI-библиотек
Работа с SEO-тегами
AsyncData и динамические метатеги
23 июня, 20:00 — урок 8

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