Frontend

Vue.js 3, Vue Router и Pinia

Полный курс по Vue.js 3, Vue Router и state менеджеру Pinia

Обновлено 06 октября 2025 г.
ЗвездаЗвездаЗвездаЗвезда
Рейтинг 4.9на основании отзывов
Иконка аватараИконка аватараИконка аватараИконка аватараИконка аватара
40,000учеников
Иконка гарантии
Легкий возврат — 30 дней

Вернем 100% стоимости без объяснения причин — стартуйте без рисков!

изображение курса
кнопка запустить видеоО курсе
Цена от:3 999 ₽6 990 ₽
При покупке до 15.01.2026
Гарантия возврата денег — 30 дней
Неограниченный доступ
Сертификат об окончании
Знания

Чему вы научитесь?

После прохождения курса вы сможете:
Создавать проект на Vue
Понимать реактивность данных
Работать с Vue Router
Использовать Pinia
Управлять состоянием данных в компонентах
Использовать Reactive API
Писать в стиле Composition API
Взаимодействовать с API
Создавать формы на Vue
Работать с жизненным циклом компонентов
Использовать Vue с TypeScript
Пользоваться встроенными компонентами
Знать синтаксис шаблонов Vue и директивы

Минимальные требования: Знание JavaScript, Знание TypeScript будет плюсом, Знание HTML и CSS

180уроковвидео с конспектами
21 упражнениедля закрепления на практике
89 тестовдля проверки знаний
Технологии
VuePiniaVue Router
О курсе

Что в курсе?

В этом курсе мы изучим Vue, Vue Router и Pinia, создавая два полноценных приложения. Мы сделаем приложение для отображения прогноза погоды и Saas сервис хранения веб закладок. Этот курс идеально подойдёт тем, кто уже знаком с основами HTML, CSS и JavaScript и готов начать работать с одним из популярных frontend фреймворков — Vue.js. Если вы уже имеете опыт работы с другими JavaScript фреймворками, этот курс поможет вам быстро освоить Vue и его экосистему.

Курс ориентирован на практическое освоение, и весь теоретический материал будет подкреплён реальными проектами. Вместо стандартных примеров, мы будем работать с настоящими API и создавать приложения, которые имитируют реальные сценарии. В процессе мы подробно изучим Vue Router для работы с маршрутами и Pinia для управления состоянием. Также в курсе предусмотрено множество упражнений, которые помогут вам углубить понимание технологий и доработать проекты, созданные на занятиях.

Иконка гарантии
Легкий возврат — 30 дней

Вернем 100% стоимости без объяснения причин — стартуйте без рисков!

certificate
Ваш сертификат по окончанию курса
Начни обучение с бонусами и гарантией возврата
от 3 999 ₽ 6 990 ₽
Иконка гарантии30 дней на возврат
Монетки300 ₽ за регистрацию
Человек40 000 студентов уже с нами
*Цена актуальна при покупке до 15 января 2026
Возможности обучения

Обучение в PurpleSchool

Собственная платформа

Интеграция с GitHub

Интеграция с GitHub

Все проекты для домашних заданий проверяются напрямую из GitHub

Поддержка всех устройств

Поддержка всех устройств

Обучайтесь в любом месте с десктоп и мобильных устройств

Подсветка синтаксиса

Подсветка синтаксиса

Не теряйтесь в коде, пользуйтесь привычным форматированием синтаксиса

Проверенные форматы

Мини-лекции

Мини-лекции

Короткие видео (по ~5 минут) позволяют обучаться даже тогда, когда времени на полноценное обучение не хватает

Упражнения

Упражнения

Выполняйте задачи, а затем сравнивайте с верным процессом решения в видео для самопроверки

Конспекты

Конспекты

Каждая лекция сопровождается детальными конспектами для удобного поиска информации

Домашние задания

Домашние задания

Осваивайте материал на реальных задачах, которые потом пригодятся в работе

Тесты

Тесты

Закрепляйте знания и находите слабые места с помощью точечных тестов по темам курса

Тщательно следим за актуальностью технологий и регулярно обновляем курсы

AI и тренажёры

Livecode-тренажёр

Livecode-тренажёр

Решайте мини-задачи по темам курса и получайте мгновенный разбор ошибок в коде от AI-наставника

Mock-тренажёр

Mock-тренажёр

Практикуйтесь в прохождении собеседований и находите ошибки, которые мешают пройти на нужную вакансию

Проверка домашних заданий

Проверка домашних заданий

Отправляйте Pull Request наставнику и получайте детальный разбор с учётом лучших практик

AI-наставник обучен на реальных проектах, практике студентов, официальной документации и материалах курса

Реальная практика в студии

Проектная команда

Проектная команда

Подключитесь в коллектив и пройдёте проект плечом к плечу

Рекомендательное письмо

Рекомендательное письмо

В случае успешной стажировки получите индивидуальное рекомендательное письмо от основателя студии PurpleCode

Реальные задачи

Реальные задачи

Реализуете действующий функционал, а не задачки из учебников

Еженедельное планирование

Еженедельное планирование

Освоите практики Agile, научитесь декомпозировать задачи, оценивать сроки, анализировать ретроспективу

Практикующие разработчики и HR

Проверка домашних заданий

Проверка домашних заданий

Получайте детальную обратную связь от разработчиков из ведущих компаний

Еженедельные консультации

Еженедельные консультации

Разбирайтесь с трудностями и вопросами на еженедельных встречах с наставником

Проверка резюме и мок

Проверка резюме и мок

Повышайте софтскиллы и проходите на вакансии выше уровнем

Гарантия: если в течение 30 дней после покупки поймёте, что курс не нравится и не прошли более 50% курса — вернём деньги без лишних вопросов.

Модули курса

План курса

Курс построен таким образом, чтобы доносить материал от простого к сложному. Ниже вы можете ознакомиться с планом курса и посмотреть часть открытых лекций по кнопке проигрывателя.

кнопка запустить видеоПример лекции
1.1 Vue и Pinia
5 мин
1.2 Как устроен курс
8 мин
1.3 Обзор проектов
4 мин
1.4 Проекты домашних заданий
3 мин
1.5 Обзор курсов
2 мин
1.6 Работа на платформе
10 мин
1.7 AI и тренажёры
7 мин
1.8 Практика на проекте
4 мин
2.1 Настройка окружения
3 мин
2.2 Настройки VSCode
4 мин
2.3 Установка Node
7 мин
2.4 О работе NVM
10 мин
2.5 Создание проекта
5 мин
2.6 Домашнее задание AI
18 мин
3.1 Обзор проекта
6 мин
3.2 Структура компонент
4 мин
3.3 Настройка eslint
7 мин
3.4 Шаблоны
5 мин
3.5 Bind атрибутов
5 мин
3.6 JS в шаблонах
3 мин
3.7 Composition API
4 мин
3.8 Тест - Основы
5 мин
С AI и тренажёрами3.9 Тренажёр - Основы
30 мин
С AI и тренажёрами3.10 Занятие - Основы
15 мин
С AI и тренажёрами3.11 Домашнее задание - Основы
60 мин
4.1 Макет проекта
3 мин
4.2 Упражнение - Глобальный стиль
8 мин
4.3 Что такое компоненты
6 мин
4.4 Первый компонент
7 мин
4.5 Стилизация
6 мин
4.6 Slot
3 мин
4.7 Несколько slot
4 мин
4.8 Декомпозиция на компоненты
8 мин
4.9 Упражнение - Сборка app
4 мин
4.10 Тест - Компоненты
5 мин
С AI и тренажёрами4.11 Тренажёр - Компоненты
30 мин
С AI и тренажёрами4.12 Занятие - Компоненты
15 мин
С AI и тренажёрами4.13 Домашнее задание - Компоненты
60 мин
5.1 Компонент статистики
6 мин
5.2 defineProps
7 мин
5.3 withDefaults
2 мин
5.4 v-bind
5 мин
5.5 Использование svg
10 мин
5.6 Упражнение - Ввод города
6 мин
5.7 Events
6 мин
5.8 defineEmits
6 мин
5.9 Валидация emits
5 мин
5.10 Наследование атрибутов
6 мин
5.11 Тест - Свойства и события
5 мин
С AI и тренажёрами5.12 Тренажёр - Свойства и события
30 мин
С AI и тренажёрами5.13 Занятие - Свойства и события
15 мин
С AI и тренажёрами5.14 Домашнее задание - Свойства и события
60 мин
6.1 Как работает реактивность
5 мин
6.2 Proxy
7 мин
6.3 ref
8 мин
6.4 reactive
5 мин
6.5 Unwrap
7 мин
6.6 nextTick
4 мин
6.7 Упражнение - Состояние редактирования
3 мин
6.8 computed
10 мин
6.9 Тест - Реактивность
5 мин
С AI и тренажёрами6.10 Тренажёр - Реактивность
30 мин
С AI и тренажёрами6.11 Занятие - Реактивность
15 мин
С AI и тренажёрами6.12 Домашнее задание - Реактивность
60 мин
7.1 v-if
5 мин
7.2 v-else
4 мин
7.3 v-show
4 мин
7.4 Упражнение - Input
10 мин
7.5 v-for
9 мин
7.6 Упражнение - Список данных
5 мин
7.7 Наивная реализация input
7 мин
7.8 v-model
5 мин
7.9 defineModel
5 мин
7.10 Тест - Шаблоны и модели
5 мин
С AI и тренажёрами7.11 Тренажёр - Шаблоны и модели
30 мин
С AI и тренажёрами7.12 Занятие - Шаблоны и модели
15 мин
С AI и тренажёрами7.13 Домашнее задание - Шаблоны и модели
60 мин
8.1 Lifecycle Hooks
5 мин
8.2 Примеры Hooks
8 мин
8.3 watch
10 мин
8.4 API погоды
6 мин
8.5 Получение данных
7 мин
8.6 keyup
3 мин
8.7 Упражнение - Привязка данных
4 мин
8.8 Упражнение - Обработка ошибок
12 мин
8.9 Динамические стили
9 мин
8.10 Упражнение - Карточка погоды
13 мин
8.11 Упражнение - Вывод прогноза
10 мин
8.12 Тест - Жизненный цикл
5 мин
С AI и тренажёрами8.13 Тренажёр - Жизненный цикл
30 мин
С AI и тренажёрами8.14 Занятие - Жизненный цикл
15 мин
С AI и тренажёрами8.15 Домашнее задание - Жизненный цикл
60 мин
9.1 Динамические классы
9 мин
9.2 Свои директивы
5 мин
9.3 Упражнение - Левая панель
5 мин
9.4 Рефакторинг компонент
10 мин
9.5 Provide Inject
7 мин
9.6 Реализация с Provide Inject
8 мин
9.7 Symbol key
5 мин
9.8 Упражнение - Передача данных
19 мин
9.9 Упражнение - Финал приложения
3 мин
9.10 Тест - Custom directive и Provide Inject
5 мин
С AI и тренажёрами9.11 Тренажёр - Custom directive и Provide Inject
30 мин
С AI и тренажёрами9.12 Занятие - Custom directive и Provide Inject
15 мин
С AI и тренажёрами9.13 Домашнее задание - Custom directive и Provide Inject
60 мин
10.1 Почему TypeScript
4 мин
10.2 Рекомендуемый курс
5 мин
10.3 Создание приложения
6 мин
10.4 Обзор проекта
4 мин
10.5 Запуск API
5 мин
10.6 Работа с API
4 мин
10.7 Подготовка стилей
8 мин
10.8 Типизация defineProps
8 мин
10.9 Типизация ответа API
8 мин
10.10 Тест - Переход на TypeScript
5 мин
С AI и тренажёрами10.11 Занятие - Переход на TypeScript
15 мин
С AI и тренажёрами10.12 Домашнее задание - Переход на TypeScript
60 мин
10.13 Отзыв о курсе
5 мин
11.1 Почему Pinia
3 мин
11.2 Установка Pinia
6 мин
11.3 Store профиля
6 мин
11.4 Actions
4 мин
11.5 Упражнение - Перенос в профиль
3 мин
11.6 Добавление axios
5 мин
11.7 Упражнение - Store для категорий
5 мин
11.8 Упражнение - Вывод списка
9 мин
11.9 Создание категории
9 мин
11.10 Тест - Pinia
5 мин
С AI и тренажёрами11.11 Занятие - Pinia
15 мин
С AI и тренажёрами11.12 Домашнее задание - Pinia
60 мин
12.1 Установка Vue Router
5 мин
12.2 RouterView
6 мин
12.3 children
7 мин
12.4 Упражнение - Страница входа
6 мин
12.5 useRouter
4 мин
12.6 LazyLoading
6 мин
12.7 Vue DevTools
11 мин
12.8 Active links
5 мин
12.9 Динамические пути
6 мин
12.10 Упражнение - Главная страница
4 мин
12.11 Helpers
7 мин
12.12 onBeforeRouteUpdate
3 мин
12.13 Упражнение - Получение закладок
8 мин
12.14 NotFound
5 мин
12.15 Тест - Vue Router
5 мин
С AI и тренажёрами12.16 Занятие - Vue Router
15 мин
С AI и тренажёрами12.17 Домашнее задание - Vue Router
60 мин
13.1 Типизация defineModel
7 мин
13.2 Работа с формой
7 мин
13.3 Отправка запроса на авторизацию
8 мин
13.4 JWT
8 мин
13.5 Хранения в LocalStorage
10 мин
13.6 NavigationGuard
8 мин
13.7 Данные за авторизацией
7 мин
13.8 Упражнение - Редактирование категории
16 мин
13.9 Упражнение - Удаление категории
5 мин
13.10 Упражнение - Компонент закладки
13 мин
13.11 Упражнение - Вывод списка закладок
8 мин
13.12 Типизация defineEmits
16 мин
13.13 Тест - Авторизация
5 мин
С AI и тренажёрами13.14 Занятие - Авторизация
15 мин
С AI и тренажёрами13.15 Домашнее задание - Авторизация
60 мин
14.1 Упражнение - добавление закладки
15 мин
14.2 useTemplateRef
5 мин
14.3 Component Registration
5 мин
14.4 Async Components
5 мин
14.5 Teleport
11 мин
14.6 Transition
6 мин
14.7 Сборка для production
5 мин
14.8 Тест - Встроенные компоненты
5 мин
С AI и тренажёрами14.9 Занятие - Встроенные компоненты
15 мин
С AI и тренажёрами14.10 Домашнее задание - Встроенные компоненты
60 мин
15.1 Куда двигаться дальше
2 мин
15.2 Финальное тестирование
20 мин
С AI и тренажёрами15.3 Собеседование с AI наставником
30 мин
Со стажировкой в студии16.1 Основы Scrum
19 мин
Со стажировкой в студии16.2 Старт задачи
11 мин
Со стажировкой в студии16.3 Выполнение задачи
11 мин
Со стажировкой в студии16.4 Код ревью
8 мин
Со стажировкой в студии16.5 Старт работы
60 мин
О платформе

Обзор платформы

Наша платформа создана так, чтобы вы могли не просто прослушать лекции, а действительно освоить материал. Здесь вы сможете пройти видеолекции, потренироваться на интерактивных тренажёрах, выполнить домашние задания, поработать с AI-наставником и проверить свои знания с помощью тестов. Всё это помогает закрепить теорию на практике и быстрее достичь результата.

Видео
Тренажёры
Домашние задания
Занятия с AI
Тесты
Командный проект
Начни обучение с бонусами и гарантией возврата
от 3 999 ₽ 6 990 ₽
Иконка гарантии30 дней на возврат
Монетки300 ₽ за регистрацию
Человек40 000 студентов уже с нами
*Цена актуальна при покупке до 15 января 2026
О проектах

Что будем писать?

AI и тренажёры

Игра - Запомни слово

Игра - Запомни слово

Игра для запоминания английских слов с полноценным API для словаря. Позволяет получить 12 случайных слов и за правльный ответ начисляются баллы.

AI и тренажёры

Приложение для медитации

Приложение для медитации

Полноценный SaaS с регистраций, авторизацией для медитации. Позволяется фиксировать настроение, использовать таймер медитации и смотреть свой прогресс и статистику

Самостоятельный

Приложение прогноза погоды

Приложение прогноза погоды

Приложение на Vue, которое позволяет посмотреть текущую погоду и прогноз в любом введённом городе

Самостоятельный

Saas сервис закладок

Saas сервис закладок

Полноценный Saas сервис с авторизацией для хранения и категоризации закладок. Возможность добавить и удалить категории и закладки. Используется Vue Router и Pinia и интеграция с API.

О PurpleSchool

Наши проекты

Антон Ларичев

Антон Ларичев

Основатель PurpleCode, школы обучения разработки PurpleSchool. 14 лет опыта разработки, более 10 лет управления ИТ проектами и интернет маркетинга.

PurpleSchool

Школа PurpleSchool

Направления
40 000

учеников по всему миру

30 дней

гарантия возврата денег

90%

студентов рекомендуют курсы

4.8
ЗвездаЗвездаЗвездаЗвездаЗвезда
4.8
ЗвездаЗвездаЗвездаЗвездаЗвезда
4.7
ЗвездаЗвездаЗвездаЗвездаЗвезда

Студия PurpleCode

Направления
50+

проектов за последний год

15

лет опыта

7

команд разработки

Практика в PurpleCode

1
Собеседуем выбранных участников
2
Прошедших отбор берём на оплачиваемую стажировку
3
После 3-х месяцев успешной стажировки - оффер
Начни обучение с бонусами и гарантией возврата
от 3 999 ₽ 6 990 ₽
Иконка гарантии30 дней на возврат
Монетки300 ₽ за регистрацию
Человек40 000 студентов уже с нами
*Цена актуальна при покупке до 15 января 2026
О тарифе

Тариф с командным проектом

  • Реальный проект

    Вы будете работать вместе с командой на реальным проектом

  • Практика

    2 недели интенсивной практики и погружения в процессы разработки

  • Наставничество

    Несколько опытных наставников будут проводить код ревью и помогать с задачами

  • Командная работа

    Вы научитесь синхронизироваться с командой и совместно реализовывать сложные фичи

  • Практика Agile

    Вы будете работать по Scrum и познакомитесь с Agile процессами

team project
  1. 1

    Планируем спринт

    1 раз в неделю мы проводим звонок и планируем спринт, декомпозируем задачи и начинаем работать над итерацией.

  2. 2

    Синхронизируемся

    Каждый день мы синхронизуемся в чате, а наставники помогают с задачами и отвечают на вопросы.

  3. 3

    Выполняем задачи

    Работая по GitFlow вы выполняете задачи и отправляете их на ревью. Код ревью проводят наставники, которые проверяют качество кода и дают рекомендации.

  4. 4

    Проводим ретроспективу

    В конце спринта мы проводим звонок-ретроспективу, где разбираем сделанные задачи и анализируем спринт.

Для вас подготовлены дополнительные материалы
  • additional material

    Макеты для вёрстки и создания компонент

  • additional material

    Техническое задание на итерацию от ProductOwner

  • additional material

    Процессы по работе в команде и код ревью

Начни обучение с бонусами и гарантией возврата
от 3 999 ₽ 6 990 ₽
Иконка гарантии30 дней на возврат
Монетки300 ₽ за регистрацию
Человек40 000 студентов уже с нами
*Цена актуальна при покупке до 15 января 2026
Команда курса

Автор курса

фото команды
Автор курса

Антон Ларичев

Основатель PurpleSchool

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

Изучи направление Фронтенд разработчик

Благодаря направлению вы сможете последовательно изучить все аспекты Frontend разработки под руководством опытного наставника, добавить множество проектов в портфолио и получить практический опыт разработки.

7
7 месяцевдлительность направления
11
11 проектовдля портфолио
1 раз
в неделю живые встречи
Начни обучение с бонусами и гарантией возврата
от 3 999 ₽ 6 990 ₽
Иконка гарантии30 дней на возврат
Монетки300 ₽ за регистрацию
Человек40 000 студентов уже с нами
*Цена актуальна при покупке до 15 января 2026

Карта развития разработчика

Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile

Курсы с наставником и без

Для компаний

Все курсы доступны для приобретения для сотрудиков компаний по безналичному расчёту. Процесс получения доступа очень простой, нужен только ваш ИНН и число сотрудников.

Свяжитесь со мнойЧерез форму ниже или по почтеcontact@purpleschool.ru
Оплата счётаВы оплачиваете счёт на нужное число мест и курсов
СтартНа email сотрудников открывается доступ
Наши курсы выбирают:
Остались вопросы?

Частые вопросы

Курс построен таким образом, чтобы доносить материал от простого к сложному. Ниже вы можете ознакомиться с планом курса и посмотреть часть открытых лекций по кнопке проигрывателя.

Вы получаете неограниченный по времени доступ к курсу и можете проходить его в темпе, в который комфортен вам. Но занятия с наставником и проверка домашнего задания ограничена 2-мя и 3-мя месяцами для 2-х тарифов.
Для тарифов с наставником доступен прямой чат с наставником, где вы можете задавать вопросы. А для всех тарифов есть общий чат и комментарии под каждой лекцией.
После приобретения курса у вас открывается доступ на приватный Telegram канал, где созданы отдельные чаты для каждого курса и есть возможность задавать вопросы наставнику напрямую. Там же проводятся голосовые звонки с наставником.
Оплата доступна по всему миру. Стоимость курса будет автоматически сконвертирована в валюту вашей страны по текущему курсу.
Если в течение 30 дней курс вам не понравился или не подошёл, вы можете запросить возврат средств если не прошли более 50% курса, написав на электронную почту contact@purpleschool.ru. После возврата средства зачисляться в течение 3-х рабочих дней.
Да, сертификат будет вам автоматически отправлен после завершения курса на электронную почту, указанную при регистрации.
На все тарифы с наставником доступна рассрочка на 2 и 3 месяца в зависимости от тарифа.
Конечно, мы дорожим своей репутацией и работаем полностью открыто, платим налоги и формирует чеки. Всю информацию о компании можно найти на сайте ФНС по ИНН, указанному в подвале сайта.
Основная ценность курса в том, что весь материал структурирован и подан в правильной последовательности. Благодаря этому вы можете получить знания быстро, качественно и структурировано. А поддержка наставника обеспечивает вам быструю обратную связь и поддержку от профессионального разработчика.
Мы рекомендуем выделять на курс от 10 до 20 часов в неделю, чтобы двигаться в хорошем темпе. Если вы приобретаете курс для самостоятельного обучения, то можете двигаться в своём темпе.
Мы всегда идём на встречу и в индивидуальном порядке продлеваем время с наставником, если вам необходим перерыв в изучении материала.
Остались вопросы? Их можно задать в чате Telegram.