Перейти к основному контенту
Tech Path Finder
КурсыИнтервьюКод-ревьюБлог
Tech Path Finder

Персонализированный путеводитель в IT. Квизы, мок-интервью, код ревью и аналитика прогресса.

@potapov_me

Платформа

  • Курсы
  • Прогресс
  • Мок-интервью
  • Код ревью
  • Живое ревью с ИИ
  • Тренажёр переговоров
  • Закладки

Контент

  • Блог
  • Главная
  • Обратная связь

Компания

  • О проекте
  • Тарифы
  • Условия использования
  • Конфиденциальность
  • Согласие на обработку данных
  • Cookie
  • Реквизиты

Аккаунт

  • Войти
  • Зарегистрироваться
  • Профиль

© 2026 Tech Path Finder. Все права защищены.

·ИП Потапов К.С.·Политика конфиденциальности·
Сделано с ❤️ в России
  1. Vue 3 + Nuxt 3: от основ до продакшна
Frontend·16 тем·114 вопросов·уровень Junior, Middle

Vue 3 + Nuxt 3: от основ до продакшна

Полный практический курс по разработке frontend-приложений на Vue 3 и Nuxt 3. От основ реактивности и Composition API до SSR, SSG, серверных маршрутов и деплоя в продакшн.

Начать курс

Vue 3 и Nuxt 3

На Vue 3 можно писать ровно так же, как на Vue 2, и многие так и пишут — пока не понадобится переиспользовать логику между компонентами. Composition API нужен для этого, а не ради нового синтаксиса. Nuxt добавляет второй слой сложности: один и тот же код выполняется и на сервере, и в браузере, и почти все неожиданности растут отсюда — от обращения к window при серверном рендеринге до состояния, случайно общего для всех пользователей.

Шестнадцать тем, восемь про Vue и восемь про Nuxt. Vue: реактивность и шаблонный синтаксис, Composition API (ref, reactive, computed, watch, script setup), продвинутые компоненты — слоты, provide/inject, асинхронные компоненты, свои composables. Типизация с TypeScript: defineProps, defineEmits, InjectionKey, InstanceType. Vue Router 4 с вложенными маршрутами и навигационными guard'ами, анимации через Transition и GSAP, тесты на Vitest и Vue Test Utils, Pinia со сторами, персистентностью и тестированием.

Nuxt: структура проекта, файловый роутинг, авто-импорты и выбор между SSR, SPA и SSG. Получение данных — useFetch, useAsyncData, $fetch, серверные маршруты на defineEventHandler, обработка ошибок и кэширование. Аутентификация с JWT в httpOnly-cookie, серверные middleware и обновление токена. Интернационализация, модули и плагины, SEO через useHead, runtimeConfig. Тестирование через @nuxt/test-utils, включая серверные маршруты. Производительность: Web Vitals, анализ бандла, ленивые компоненты, NuxtImage, ISR. Деплой: Vercel, Netlify, Docker с Nginx и PM2, пайплайн в GitHub Actions.

Нужен JavaScript и базовый TypeScript. Опыт с Vue 2 не требуется.

  1. 1

    Основы Vue 3

    Философия Vue 3, реактивность, шаблонный синтаксис, директивы, v-model, вычисляемые свойства и жизненный цикл компонента

    8 вопросов
  2. 2

    Composition API

    ref, reactive, computed, watch, watchEffect, lifecycle hooks и синтаксический сахар script setup

    7 вопросов
  3. 3

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

    Props, emits, слоты, provide/inject, динамические и асинхронные компоненты, v-model на компонентах, composables

    6 вопросов
  4. 4

    TypeScript с Vue 3

    Полная типизация компонентов: script setup, defineProps, defineEmits, InjectionKey, InstanceType и MaybeRefOrGetter

    8 вопросов
  5. 5

    Vue Router 4

    Установка и конфигурация роутера, динамические маршруты, навигационные guards, вложенные маршруты, lazy loading

    7 вопросов
  6. 6

    Анимации в Vue 3

    Компоненты Transition и TransitionGroup, CSS-классы анимаций, JavaScript-хуки, GSAP и анимация списков

    6 вопросов
  7. 7

    Тестирование Vue компонентов

    Vitest, Vue Test Utils: mount/shallowMount, моки props и emits, тестирование composables и асинхронных операций

    8 вопросов
  8. 8

    Pinia: управление состоянием

    defineStore, state, getters, actions, storeToRefs, плагин персистентности и тестирование сторов

    6 вопросов
  9. 9

    Основы Nuxt 3

    Структура проекта, файловый роутинг, layouts, авто-импорты, режимы рендеринга SSR/SPA/SSG и Nuxt DevTools

    6 вопросов
  10. 10

    Получение данных в Nuxt 3

    useFetch, useAsyncData, $fetch, серверные маршруты, defineEventHandler, обработка ошибок и кэширование

    7 вопросов
  11. 11

    Аутентификация в Nuxt 3

    JWT, httpOnly cookies, серверные middleware для защиты маршрутов, useAuth composable и refresh token flow

    7 вопросов
  12. 12

    Интернационализация (i18n)

    Модуль @nuxtjs/i18n, стратегии локализации URL, useI18n composable, pluralization и lazy-загрузка переводов

    6 вопросов
  13. 13

    Продвинутый Nuxt 3

    Middleware, плагины, Nuxt modules, SEO с useHead, оптимизация изображений, runtimeConfig и деплой

    6 вопросов
  14. 14

    Тестирование Nuxt приложений

    Vitest с Nuxt, @nuxt/test-utils, тестирование страниц, server routes и composables в Nuxt-окружении

    7 вопросов
  15. 15

    Производительность и оптимизация

    Web Vitals, bundle анализ, lazy-компоненты, NuxtImage, кэширование server routes, ISR и Lighthouse CI

    10 вопросов
  16. 16

    Деплой Nuxt приложений

    SSR, SSG и гибридный деплой: Vercel, Netlify, Railway, Docker, Nginx, PM2 и CI/CD pipeline с GitHub Actions

    9 вопросов
  17. Зачёт

    Доступен после всех тем (0 из 16)

  18. Экзамен

    Доступен после зачёта

31 / 31

Virtual DOM

Ядро Vue 3

Облегчённое JavaScript-представление реального DOM. Vue сравнивает старое и новое виртуальное дерево (diffing) и применяет только минимальный набор изменений к реальному DOM.

Пример

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

Связанные термины

Reactivity System (система реактивности)

Ядро Vue 3

Механизм Vue 3, основанный на Proxy, который автоматически отслеживает доступ к реактивным данным и инициирует обновление DOM при их изменении.

Пример

const count = ref(0); count.value++ — Vue автоматически обновит {{ count }} в шаблоне.

Связанные термины

ref()

Ядро Vue 3

Функция Composition API, создающая реактивную ссылку на значение любого типа. Оборачивает значение в объект с полем .value для отслеживания изменений.

Пример

const count = ref(0); count.value++; // В шаблоне: {{ count }} (без .value)

Связанные термины

reactive()

Ядро Vue 3

Функция Composition API, создающая глубоко реактивный прокси объекта. Доступ к свойствам напрямую без .value. Деструктуризация ломает реактивность.

Пример

const state = reactive({ count: 0, name: '' }); state.count++; // нет .value

Связанные термины

computed()

Ядро Vue 3

Функция Composition API, создающая вычисляемое реактивное значение. Результат кэшируется и пересчитывается только при изменении зависимостей.

Пример

const doubled = computed(() => count.value * 2); // Только для чтения по умолчанию

Связанные термины

watch()

Ядро Vue 3

Composable для наблюдения за изменениями реактивного источника. Получает старое и новое значение. Поддерживает опции immediate и deep.

Пример

watch(userId, async (newId) => { user.value = await fetchUser(newId) }, { immediate: true })

Связанные термины

watchEffect()

Ядро Vue 3

Composable, который немедленно запускает функцию и автоматически отслеживает все реактивные зависимости внутри неё. Перезапускается при любом их изменении.

Пример

watchEffect(() => { console.log(count.value, name.value) // оба отслеживаются })

Связанные термины

Single File Component (SFC)

Ядро Vue 3

Формат файла .vue, инкапсулирующий шаблон (<template>), логику (<script>) и стили (<style>) одного компонента в одном файле.

Пример

<template>...</template> <script setup>...</script> <style scoped>...</style>

Связанные термины

Props

Компоненты

Механизм передачи данных от родительского компонента к дочернему. Props только для чтения — мутация нарушает однонаправленный поток данных.

Пример

defineProps({ title: String, count: { type: Number, default: 0 } })

Связанные термины

Emits

Компоненты

Механизм коммуникации от дочернего компонента к родительскому. Дочерний вызывает emit('event', data), родитель подписывается через @event.

Пример

const emit = defineEmits(['update', 'close']); emit('update', newValue);

Связанные термины

Slots (слоты)

Компоненты

Механизм для передачи шаблонного контента в компонент от родителя. Поддерживает default, named и scoped слоты.

Пример

<!-- В компоненте --> <slot name="header">Заголовок по умолчанию</slot> <!-- Использование --> <template #header>Мой заголовок</template>

Связанные термины

provide / inject

Компоненты

Механизм передачи данных через дерево компонентов без prop drilling. Предок предоставляет данные через provide, любой потомок получает через inject.

Пример

// Предок: provide('theme', readonly(theme)); // Потомок: const theme = inject('theme', 'light');

Связанные термины

Composable

Компоненты

Функция с префиксом use, инкапсулирующая и переиспользующая логику с сохранением состояния. Основной паттерн переиспользования кода в Composition API.

Пример

// composables/useCounter.js export function useCounter(initial = 0) { const count = ref(initial) return { count, increment: () => count.value++ } }

Связанные термины

Dynamic Component

Компоненты

Компонент, который рендерится динамически в зависимости от переменной через `<component :is="currentComponent">`. Часто используется с KeepAlive для сохранения состояния.

Пример

<KeepAlive> <component :is="tabs[activeTab]" /> </KeepAlive>

Связанные термины

Route (маршрут)

Маршрутизация

Правило, связывающее URL-путь с компонентом Vue. Может содержать динамические сегменты, мета-данные, вложенные маршруты.

Пример

{ path: '/users/:id', name: 'user', component: UserView, meta: { requiresAuth: true } }

Связанные термины

Navigation Guard

Маршрутизация

Хук маршрутизации для контроля навигации: аутентификация, права доступа, несохранённые изменения. Бывает глобальным (beforeEach), маршрутным и компонентным.

Пример

router.beforeEach((to, from) => { if (to.meta.requiresAuth && !isLoggedIn) { return '/login' } })

Связанные термины

RouterLink

Маршрутизация

Компонент Vue Router для навигации без перезагрузки страницы. Автоматически добавляет активные классы для текущего маршрута.

Пример

<RouterLink to="/about">О нас</RouterLink> <RouterLink :to="{ name: 'user', params: { id: 42 } }">Профиль</RouterLink>

Связанные термины

Dynamic Segment

Маршрутизация

Переменная часть URL-маршрута, обозначаемая двоеточием: /users/:id. Значение доступно через route.params в компоненте.

Пример

// Маршрут: /users/:id // URL: /users/42 const route = useRoute(); route.params.id // '42'

Связанные термины

Pinia Store

Управление состоянием

Хранилище реактивного состояния, доступное глобально. Определяется через defineStore. Состоит из state, getters и actions.

Пример

export const useCartStore = defineStore('cart', () => { const items = ref([]) const total = computed(() => items.value.reduce(...)) return { items, total } })

Связанные термины

Action

Управление состоянием

Метод стора Pinia, который может изменять state и выполнять асинхронные операции (fetch, setTimeout). Аналог метода в компоненте.

Пример

async function loadUser(id) { isLoading.value = true user.value = await $fetch(`/api/users/${id}`) isLoading.value = false }

Связанные термины

Getter

Управление состоянием

Вычисляемое значение в Pinia, производное от state. В Setup стиле — computed(). Кэшируется и пересчитывается при изменении зависимостей.

Пример

// Setup стиль const totalPrice = computed(() => items.value.reduce((sum, item) => sum + item.price, 0) )

Связанные термины

storeToRefs()

Управление состоянием

Утилита Pinia для деструктуризации state и getters с сохранением реактивности. Actions деструктурируются напрямую.

Пример

const store = useCartStore() const { items, total } = storeToRefs(store) // реактивно! const { addItem } = store // action — напрямую

Связанные термины

SSR (Server-Side Rendering)

Nuxt 3

Режим рендеринга, при котором HTML страницы генерируется на сервере при каждом запросе. Обеспечивает быструю первую загрузку и хороший SEO.

Пример

// nuxt.config.ts export default defineNuxtConfig({ ssr: true }) // default

Связанные термины

SSG (Static Site Generation)

Nuxt 3

Режим, при котором все страницы пре-рендерятся в HTML-файлы при сборке. Не требует сервера, идеален для контентных сайтов.

Пример

# Генерация статики npx nuxi generate # Результат в .output/public/

Связанные термины

File-based Routing

Nuxt 3

Система Nuxt, автоматически создающая маршруты из структуры папки pages/. Файл pages/users/[id].vue становится маршрутом /users/:id.

Пример

pages/ ├── index.vue → / ├── about.vue → /about └── users/[id].vue → /users/:id

Связанные термины

Auto-imports

Nuxt 3

Функция Nuxt, автоматически импортирующая компоненты из components/, composables из composables/, все Vue API и Nuxt composables без явных import-строк.

Пример

// Не нужно писать: // import { ref } from 'vue' // import MyComponent from '@/components/MyComponent.vue' // Просто используйте сразу:

Связанные термины

Server Route

Nuxt 3

Файл в server/api/, создающий HTTP-эндпоинт на сервере Nitro. Имя файла определяет путь, суффикс (.get.ts, .post.ts) — HTTP-метод.

Пример

// server/api/users/[id].get.ts export default defineEventHandler(async (event) => { const id = getRouterParam(event, 'id') return await db.users.findById(id) })

Связанные термины

Nuxt Module

Nuxt 3

Пакет, расширяющий функциональность Nuxt: добавляет компоненты, composables, настройки. Подключается через modules в nuxt.config.ts.

Пример

// nuxt.config.ts modules: ['@pinia/nuxt', '@nuxtjs/tailwindcss', '@nuxt/image']

Связанные термины

useFetch()

Nuxt 3

Основной Nuxt composable для получения данных. Выполняется на сервере при SSR и на клиенте при навигации. Возвращает data, pending, error, refresh.

Пример

const { data: posts, pending, error } = await useFetch('/api/posts') // data — ref с данными // pending — ref<boolean> состояния загрузки

Связанные термины

useAsyncData()

Nuxt 3

Более гибкий Nuxt composable для получения данных с явным ключом кэша. Принимает функцию, а не URL — можно использовать любой источник данных.

Пример

const { data } = await useAsyncData('dashboard', async () => { const [stats, posts] = await Promise.all([ $fetch('/api/stats'), $fetch('/api/posts') ]) return { stats, posts } })

Связанные термины

runtimeConfig

Nuxt 3

Механизм Nuxt для безопасного управления переменными окружения. Серверные секреты в верхнем уровне, публичные переменные в .public. Доступ через useRuntimeConfig().

Пример

// nuxt.config.ts runtimeConfig: { apiSecret: process.env.API_SECRET, // только сервер public: { apiBase: '/api' } // везде }

Связанные термины

Частые вопросы о курсе «Vue 3 + Nuxt 3: от основ до продакшна»

Состав курса, уровни, практика и способы проверки знаний.

Что входит в курс «Vue 3 + Nuxt 3: от основ до продакшна»?

Курс включает 16 тем и 114 вопросов с разбором ответа. Начать можно с первой темы курса.

Для какого уровня рассчитан курс «Vue 3 + Nuxt 3: от основ до продакшна»?

Маршрут охватывает уровни Junior, Middle. Темы расположены от основы к более сложным инженерным задачам, поэтому можно начать с подходящего места и не пропускать важные зависимости.

Как проверить, что материал усвоен?

После прохождения тем доступен зачёт по курсу «Vue 3 + Nuxt 3: от основ до продакшна» — 20 случайных вопросов с порогом 80%. После зачёта открывается экзамен с развёрнутыми ответами и автоматической оценкой, приближённый к техническому собеседованию.

Курс «Vue 3 + Nuxt 3: от основ до продакшна» бесплатный?

Да, курс полностью бесплатный: все 16 тем доступны без оплаты.