Nuxt.js с нуля - 20 серий

Плейлист из всех 20 серий: https://www.youtube.com/playlist?list=PLOICX-WjKEZe85LsS1UnQScl4Qv_cQsnC

С 11 апреля по 31 мая делал серию прямых трансляции на своём ютуб канале про существенное обновление текущего сайта. Всего получилось около 37 часов видео. Но я советую смотреть хотя бы на скорости 1.5х, но видео можно смотреть и на 2х ускорении. Экономьте своё время :)

Такие видео будут полезны для тех, кто только начинает знакомство с фреймворком Nuxt.js и хочет увидеть, как на нём можно сделать не теоретический проект, а реальный сайт. Кстати, вы сейчас на нём находитесь. Приятного просмотра!

1. Что такое Nuxt.js + установка.

• 00:00 Баг Ютуба
• 03:43 Начало про Nuxt.js
• 05:04 Что такое Nuxt.js
• 05:50 Сайты, которые используют Nuxt.js
• 13:15 Server side rendering
• 19:35 Другие варианты работы Nuxt.js
• 23:20 Подготовка с установке Nuxt.js
• 25:30 Пример модели "Блог" в mongoose
• 33:20 Что плохого в текущем сайте
• 37:58 Fetch в версии Nuxt.js 2.12
• 41:53 Процесс установки ПО перед Nuxt.js
• 49:35 Установка Nuxt.js
• 01:01:16 Открытие папки с проектом Nuxt.js в VS Code
• 01:01:39 Структура проекта Nuxt.js
• 01:04:49 Запуск Nuxt.js
• 01:14:00 Финал

2. SEO + базовые настройки и плагины.

• 00:00 Вступление
• 04:25 Анализ сайта с помощью SEO Spider
• 06:27 Кодировка сайта
• 07:11 Код ответа сервера
• 08:02 301 редирект
• 11:01 Учитываем рекомендации поисковых систем
• 12:14 Возможность индексации страниц
• 18:45 Title, Description, H1
• 23:56 Про важность SEO
• 28:30 Адреса страниц
• 42:30 Как добавить Title и Description на странице в Nuxt.js
• 48:00 Подключение style.css для всего сайта в nuxt.config.js
• 59:05 Мета-тег Canonical
• 01:15:58 Пример дублей страниц сайта на Битриксе
• 01:23:07 Добавление Canonical в шаблоне Nuxt.js
• 01:30:55 Мета-теги Open Graph для соц сетей
• 01:32:46 Схема.орг
• 01:36:10 Установка Яндекс.Метрики в Nuxt.js
• 01:45:00 Установка карты сайта sitemap-module
• 02:11:40 Конец

3. Компонент Header.

• 00:00 Начало
• 05:17 Создание страниц и разделов
• 12:27 Создание и подключение компонента Header
• 18:10 HTML содержимое шапки сайта
• 31:52 CSS оформление шапки сайта
• 35:55 Подключение шрифтов
• 38:25 Вёрстка меню навигации
• 40:48 Выделение текущей ссылки nuxt-link-exact-active
• 48:03 Вёрстка правой части шапки сайта
• 01:05:15 Применение базовых стилей к основному блоку
• 01:06:30 Создание шаблона для главной страницы
• 01:08:02 Присвоение шаблонов страницам
• 01:11:30 Итог

4. Бекенд и модели в Mongoose.

• 00:00 Начало
• 02:20 Prettier для VS Code
• 02:50 Установка и настройка mongoose
• 10:30 Структура бекенда на примере страниц с услугами
• 16:09 Базовый маршрут для обработки GET запроса
• 21:20 Создание модели Услуга
• 27:57 Маршрут для создания Услуги
• 33:00 Форма для создания Услуг с фронтенда
• 57:20 then() после выполнение запроса
• 01:01:27 Получение всех Услуг методом GET
• 01:06:13 v-for для массива с данными
• 01:13:40 Итог

5. Перенос старых моделей в новый сайт.

• 00:00 Введение
• 04:00 Что я делал на прошлой трансляции
• 07:10 Перенос данных из базы MongoDB
• 10:05 Текущие модели
• 15:25 Загрузка старой базы в новый проект
• 31:45 Подключение старых моделей
• 36:43 Перенос старых маршрутов и установка ПО
• 39:28 Вывод данных из базы на фронтенде
• 57:00 Вёрстка блога
• 01:08:32 Создание страницы и маршрута для одной записи
• 01:14:23 Хлебные крошки
• 01:20:33 Вывод html контента внутри страницы блога
• 01:21:42 Итог

6. Вывод записей из MongoDB.

• 00:00 Введение
• 01:44 Динамические страницы _id.vue
• 13:45 Вёрстка страницы блога
• 32:23 Блок "Поделиться" от Яндекса
• 35:35 Про фотик в качестве веб-камеры
• 41:41 Подключение скриптов на странице
• 46:14 Перенос скриптов из head в body
• 51:46 Форматирование даты с nuxt-date-fns
• 01:07:58 Выбор модуля для комментариев
• 01:19:13 Итог

7. Тегирование и пагинация.

• 00:00 Начало
• 00:59 Теги записей в блоге
• 04:38 Создание страниц под теги
• 06:50 Фильтрация данных через тег
• 11:06 Создание меню тегов
• 16:28 Бекенд реализация фильтра по тегу
• 18:37 Добавление данных в header запроса axios
• 28:26 Возвращаемся к бекенду
• 41:53 Вёрстка меню тегов
• 48:20 Пагинация на бекенде
• 56:20 Пагинация на фронтенде
• 01:18:33 Скрытие кнопки Далее на последней странице
• 02:10:37 Обработка неправильных запросов на пагинации
• 02:23:18 Проблема с возвратом на первую страницу

8. Пагинация и создание боковой колонки сайта.

• 00:00 Перешёл с веб-камеры на фотоаппарат
• 12:00 Решение проблемы со сбросом пагинации
• 17:20 Стили для кнопок пагинации
• 22:13 Доделываю пагинацию для разделов с тегами
• 01:26:26 Вывод данных для боковой колонки блога
• 01:39:21 Вёрстка боковой колонки

9. Вёрстка главной страницы и слайдера.

• 00:00 Начало
• 02:00 Про fetch и asyncData
• 14:38 Выбор записей блога на главной странице
• 28:22 Вёрстка первого экрана главной страницы
• 41:44 Вёрстка блока с УТП
• 01:00:36 Выбор слайдера
• 01:07:05 Установка vue-awesome-swiper
• 01:10:17 Создание слайдера на главной странице
• 01:17:55 Вёрстка слайдера

10. Вёрстка сайта.

• 00:00 Начало с техническими проблемами
• 02:10 Вёрстка блока с логотипами
• 09:20 Подготовка логотипов для заливки на сайт
• 16:00 Сравнение качества сжатия tinypng и фотошопа
• 24:40 Добавление логотипов на сайт
• 30:10 Установка nuxt-lazy-load
• 39:47 Вёрстка блока про прямые трансляции
• 48:44 Делаю зафиксированную шапку сайта
• 01:04:07 Вёрстка футера
• 01:26:45 Итог

11. Добавление записей в MongoDB и загрузка картинок.

• 00:00 Начало
• 02:30 Создание модели Услуга
• 11:28 Маршруты в Express для услуг
• 21:07 Создание страницы на фронтенде для одной услуги
• 34:30 Отправка запросов через Postman
• 39:11 Публикация услуг с фронтенда
• 01:08:44 Загрузка файла (с ошибкой, см. след. стрим)
• 01:33:24 Выбор визуального текстового редактора
• 01:38:27 Внесение услуг в базу

12. Редактирование записей в базе данных.

• 00:00 Начало БЕЗ ЭКРАНА
• 00:40 Ошибка в прошлой трансляции про загрузку файлов БЕЗ ЭКРАНА
• 03:17 Про компоненты БЕЗ ЭКРАНА
• 15:23 ВКЛЮЧИЛ ЭКРАН!!!
• 15:40 Ещё раз про компоненты
• 16:40 Редактирование услуг с фронтенда
• 01:15:05 Удаление услуги
• 01:37:04 Обновление изображения, прикрепленного к услуге
• 02:23:06 Итог

13. Async fetch, компоненты и кейсы.

• 00:00 Начало
• 01:00 Пример работы async fetch
• 05:17 Вывод компонентов в услугах с vue-multiselect
• 24:50 Раздел с кейсами
• 27:50 Создание модели Кейс
• 35:52 Создание маршрутов на бекенде для кейсов
• 42:38 Создание кейсов на фронтенде
• 52:30 Установка и настройка tinyMCE
• 01:26:41 Итог

14. Прайс-лист, теги и вёрстка контактов.

• 00:00 Текущее состояние сайта
• 01:33 Показываю готовый раздел с кейсами
• 08:52 Отправка 2 отдельных картинок через форму
• 13:48 Отправка массива через vue-multiselect
• 17:14 Админка для редактирования кейсов
• 19:00 Обновления в разделе Блог
• 24:48 Вывод таблицы с динамическим прайсом
• 38:20 Вывод тегов в кейсах
• 01:07:03 Вёрстка страницы Контакты
• 02:19:15 Добавление схемы проезда из Яндекс.Карт

15. Формы и валидация.

• 00:00 Начало
• 01:20 Изменения на сайте
• 02:28 Поиск по сайту
• 08:44 Хлебные крошки + передача данных в компонент
• 11:05 Компонент с блоком Поделиться от Яндекса
• 13:35 Код внутренней страницы wiki
• 16:06 Форма обратной связи
• 22:27 Отправка данных формы на почту через Nodemailer
• 34:36 Валидация Vee-Validate 3
• 42:32 Примеры правил для валидации данных
• 48:40 Вынос формы обратной связи в отдельный компонент
• 01:05:21 Вёрстка формы обратной связи
• 01:40:19 Делаю заголовок формы динамическим

16. Мобильная версия и PWA.

• 00:00 Начало
• 01:00 Подготовка к вёрстке вертикальной мобильной версии
• 03:30 Показываю вёрстку старой версии сайта
• 05:23 Варианты фиксации меню
• 06:10 Продолжаю про подгтовку к вёрстке мобильной версии
• 07:45 Вёрстка вертикальной мобильной версии
• 11:23 Добавление гамбургера для навигации
• 36:24 Функциональность показа и скрытия меню
• 57:02 Вёрстка главной страницы
• 01:12:08 Рассказываю про свои роутер и wi-fi адаптер)
• 01:15:05 Продолжение вёрстки главной страницы
• 01:21:47 Установка и настройка Nuxt PWA
• 01:46:07 Сворачивание меню после клика по ссылке

17. Админка сайта.

• 00:00 Начало
• 01:13 Меню админки
• 03:00 Бекенд валидация уникальности урлов
• 05:30 Транслитерация h1 в корректный адрес страницы
• 10:10 Валидация данных в форме админки
• 13:45 Валидация загрузки файла (баг Vee-Validate)
• 33:00 Компонент и store меню админки
• 49:32 Установка и настройка уведомлений nuxt toast

18. Авторизация Nuxt-auth и JWT токен.

• 00:00 Начало
• 00:40 Текущие изменения на сайте
• 03:00 Замена window.location.reload на нормальное обновление данных
• 06:50 Подключение компонентов другим способом для code spliting
• 08:42 Изменения в CSS файлах
• 13:30 Установка Nuxt-auth
• 14:40 Как генерируется sitemap.xml с динамическими урлами
• 18:16 Настройка Nuxt-auth
• 21:58 Форма логина
• 39:45 Обработка запросов из формы логина
• 01:01:30 Создание bearer токена
• 02:07:18 Расшифровка токена и отправка user
• 02:38:38 Что нужно сделать дальше для авторизации

19. Окончание авторизации, деплой на VDS + много полезных мелочей.

• 00:00 Начало
• 01:37 Для чего нужна авторизация
• 03:36 Защита роутов на бекэнде
• 07:24 Ограничение времени действия токена
• 12:45 Проверка логина и пароля
• 16:20 Дополнительные методы по защите сайта
• 20:05 nuxt-env по умолчанию виден на фронте
• 21:55 Показываю финальный package.json
• 24:10 Nuxt-auth Logout
• 28:32 Шаблон для страниц с ошибками, например 404
• 29:50 Helmet для Express JS
• 34:07 Загрузка изображений в TinyMCE
• 43:00 Nuxt build analyzer
• 45:58 Подключение плагинов и компонентов
• 47:10 Генерация документов MS Word
• 52:50 Данные гидрации
• 01:06:15 Деплой (перенос сайта/программы) на VDS
• 01:16:56 Добавление Nuxt PWA в Google Play
• 01:19:40 Что будет дальше?

20. Финал. Полный обзор проекта.

• 00:00 Начало
• 03:22 Запуск проекта
• 04:47 Nuxt.config.js
• 05:43 Режим работы Universal
• 06:35 Общий раздел Head
• 09:35 Подключение валидации Vee-Validate 3
• 10:20 Отправка формы на почту с Nodemailer
• 12:15 Реализация 301 редиректов
• 13:52 Работа с датами date-fns
• 15:11 Nuxt PWA
• 16:40 Отправка запросов через Axios
• 18:17 Генерация sitemap.xml
• 20:55 Nuxt http + async fetch
• 22:17 Уведомления toast
• 23:30 Авторизация Nuxt-auth
• 27:07 Отложенная загрузка контента Nuxt-lazy-load
• 28:50 Подключение Яндекс.Метрики
• 29:21 Локальная стратегия авторизации Nuxt-auth
• 30:31 Axios proxy для деплоя
• 31:16 Настройки валидации Vee-Validate 3
• 32:48 Package.json
• 32:51 Визуальный редактор tinyMCE
• 33:23 Загрузка изображений через tinyMCE
• 36:53 Генерация документов через file-saver
• 40:05 Mongoose + модели
• 43:36 Слайдер vue-awesome-swiper
• 47:59 Vue-multiselect
• 51:08 Компоненты админки и хлебных крошек
• 52:10 Разметка Schema.org для хлебных крошек, услуг и организации
• 54:55 Компоненты: логотипы клиентов, отправка формы, слайдер, сравнение цен
• 56:04 Выбор компонентов для вывода на страницах услуг
• 57:17 Подключение блока "Поделиться" от Яндекса (забыл указать body:true)
• 58:32 Поиск на сайте
• 01:01:28 Компоненты header и footer
• 01:02:40 Скрипт для транслита url
• 01:03:45 Шаблоны сайта layouts
• 01:05:58 Страницы сайта pages
• 01:07:53 Показываю все бандлы через npx nuxt build -a
• 01:08:43 Продолжение по страницам сайта
• 01:15:50 Бекенд
• 01:16:42 Папка со статичными файлами static