Задача: разобраться с главными темами фреймворка 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 и без
