Фреймворк Nuxt (Дмитрий Лаврик)

​

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