👨‍💻DEV [PurpleSchool] Антон Ларичев → Nuxt - fullstack Vue фреймворк (2025)

[Odyvanchik]

[PurpleSchool] Антон Ларичев → Nuxt - fullstack Vue фреймворк (2025)

Полный курс по Nuxt и созданию веб приложений на Vue

После прохождения курса вы сможете:

* Создавать Nuxt-приложения с нуля

* Настраивать SSR и SSG

* Работать с файловым роутингом

* Разрабатывать переиспользуемые композаблы

* Настраивать middleware и плагины

* Интегрировать внешние API

* Оптимизировать SEO и производительность

* Работать с модулями экосистемы

* Развертывать приложения в продакшен

Что в курсе?

В этом курсе мы познакомимся с Nuxt — веб-фреймворком на Vue. Курс будет максимально практическим, так как мы всё будем изучать, создавая интернет-магазин и сразу применяя полученные знания на практике. Для проекта подготовлено множество макетов и готовое API, которое вы сможете запустить локально.

Мы начнём с создания нового проекта, настроим layout и разберёмся с роутингом. Далее погрузимся в Universal Rendering, посмотрим, как он работает, что такое гидратация и чем SSR отличается от CSR.

После этого изучим PostCSS, работу со стилями и анимацию смены страниц, посмотрим, как работать с состоянием в SSR и подключим Pinia. Затем перейдём к более продвинутым темам, таким как авторизация в Nuxt, SEO, мета-теги и OpenGraph. В конце курса рассмотрим backend-составляющую Nuxt, создадим простое API и сохраним данные пользователя в базу данных.

План курса:
01. Введение

1.1 Nuxt

1.2 Как устроен курс

1.3 Обзор проекта

1.4 Работа на платформе

1.5 Проект домашнего задания

1.6 AI и тренажёры

1.7 Практика на проекте

1.8 Рекомендуемый курс

02. Настройка окружения

2.1 Настройка окружения

2.2 Установка Node

2.3 Настройки VSCode

2.4 Создание проекта

2.5 Домашнее задание AI

03. Структура проекта

3.1 Обзор проекта

3.2 Автоимпорт

3.3 Вложенные компоненты

3.4 Настройка автоимпортов

3.5 App configuration

3.6 Environment vars

3.7 Тест - Структура проекта

04. Роутинг

4.1 Добавление страниц

4.2 Программный роутинг

4.3 NuxtLink и prefetch

4.4 Перенаправление

4.5 Страница ошибки

4.6 Nuxt Font и стили

4.7 Упражнение - Компонент кнопки

4.8 Упражнение - Стилизация страницы ошибки

4.9 Структура путей

4.10 Динамические пути

4.11 Тест - Роутинг

05. Layout

5.1 Default Layout

5.2 Custom Layout

5.3 Упражнение - Input

5.4 Добавление иконок

5.5 NuxtIcon

5.6 Упражнение - Вёрстка Footer

5.7 Стилизация иконок

5.8 Упражнение - Шапка

5.9 Состояние ссылок

5.10 Тест - Layout

06. Server Side Rendering

6.1 Universal Rendering

6.2 Пример рендера

6.3 Client Side Rendering

6.4 ClientOnly

6.5 Жизненный цикл Nuxt

6.6 Hybrid Rendering

6.7 Тест - Server Side Rendering

07. Стилизация и анимация

7.1 CSS модули

7.2 Postcss

7.3 Page Transitions

7.4 Внешние стили

7.5 Tailwind

7.6 Тест - Стилизация и анимация

08. Получение данных

8.1 Развёртка API

8.2 Запросы в Insomnia

8.3 $fetch

8.4 useFetch

8.5 Ограничения useFetch

8.6 Refresh данных

8.7 useAsyncData

8.8 Упражнение - Select

8.9 Вывод категорий в каталоге

8.10 Упражнение - Карточка товара

8.11 v-bind стилей

8.12 Упражнение - Данные товаров

8.13 Тест - Получение данных

09. Работа с состоянием

9.1 Повторный запрос данных

9.2 Хранение состояния с SSR

9.3 Упражнение - Поиск по каталогу

9.4 useDebounce

9.5 Добавление Pinia

9.6 Store для избранного

9.7 callOnce

9.8 Добавление в избранное

9.9 Persisted State

9.10 Упражнение - Отображение избранного

9.11 Тест - Работа с состоянием

10. Авторизация

10.1 Форма авторизации

10.2 Получение JWT

10.3 Упражнение - State авторизации

10.4 Middleware

10.5 Глобальный middleware

10.6 Упражнение - Выход пользователя

10.7 Тест - Авторизация

11. SEO и Metadata

11.1 Default head и favicon

11.2 useHead и useSeoMeta

11.3 Динамический title

11.4 Title template

11.5 Sitemap

11.6 Robots txt

11.7 Nuxt DevTools

11.8 Тест - SEO и Metadata

12. Server endpoints

12.1 Server Middleware

12.2 Server routes

12.3 Body Query Params

12.4 Подключение базы данных

12.5 Сохранение данных

12.6 Интеграция с frontend

12.7 Упражнение - Получение данных

12.8 Тест - Server endpoints

13. Заключение

13.1 Куда двигаться дальше?

13.2 Финальное тестирование

Обновлено 12 апреля 2025г.

Автор курса: Антон Ларичев

Основатель PurpleSchool

Занимаюсь разработкой уже более 14 лет и имею большой опыт: JavaScript, TypeScript, Php, Go, C#, Swift и Python. Активно внедряю гибкие методологии разработки в компании и внутренние обучения для команд.

Тариф Самостоятельный

Уроки и упражнения

Обратите внимание: Домашние задания, Ai-тренажеры, Поддержка наставника, Практика в студии - в данный тариф не входят.



—————————————————————————

🔗 Продажник:

📥 СКАЧАТЬ КУРС:

Для просмотра содержимого вам необходимо Войти или Зарегистрироваться.

🔐 Хотите получить доступ?

Чтобы увидеть скрытые ссылки и ставить лайки, активируйте VIP-статус.

💎 ПОЛУЧИТЬ ДОСТУП Наш Telegram канал