Vue.js для фронтендера: компоненты, Pinia, роутинг и Nuxt

Тому, кто пришёл из React, Vue кажется знакомым: те же компоненты, props и события. Разница в том, как фреймворк узнаёт об изменениях. В React вы вызываете функцию обновления состояния, и компонент перерисовывается. Во Vue вы просто присваиваете новое значение, а система реактивности сама знает, какие вычисления и места в разметке от него зависят. Отсюда и другие ошибки: во Vue теряют реактивность, когда достают значение из реактивного объекта и дальше работают с копией.

Что фронтендер делает на Vue

Работа начинается с макета, который делят на компоненты: фильтр, карточка, таблица, модальное окно. В блоке template пишут разметку с директивами — специальными атрибутами: v-if показывает элемент по условию, v-for выводит список, v-model связывает поле ввода с переменной. В блоке script setup объявляют состояние через ref, производные значения через computed, реакцию на изменения через watch. Данные передают вниз через props, а наверх сообщают событиями через emit.

Дальше подключают окружение. Vue Router определяет, какой компонент показать по адресу, а проверка перед переходом не пускает на закрытые страницы без входа. Pinia хранит то, что нужно нескольким экранам сразу: пользователя, корзину, справочники.

Vue или React: в чём разница на практике

Фреймворк обычно выбирает команда, поэтому полезнее понимать, чем отличается повседневная работа.

Vue удобен, если интерфейс нужно встроить в сайт, который уже собирает HTML на сервере: фреймворк можно подключить к одной странице без сборки, через тег script. Он подойдёт верстальщику, которому привычнее шаблоны, чем JSX, и проектам на Laravel, где Vue давно используют вместе с PHP. Если команда пишет на React или планирует приложение на React Native, разумнее учить React.

Реактивность и деструктуризация

Vue 3 отслеживает обращения к свойствам: если computed читает props.status, фреймворк запоминает эту связь. Как только код достаёт значение в отдельную переменную, связь пропадает. Поэтому стор Pinia нельзя просто разобрать на переменные: документация Pinia предупреждает, что такие значения перестают обновляться, и предлагает функцию storeToRefs. Действия стора можно доставать напрямую.

С props правило изменилось. До версии 3.4 включительно переменная из const { status } = defineProps(…) была обычной константой, и watchEffect с ней срабатывал только один раз. В Vue 3.5, вышедшей 1 сентября 2024 года, реактивная деструктуризация props стала стабильной: компилятор сам подставляет props.status там, где код обращается к status. Ограничение осталось: документация объясняет, что watch(status, …) не сработает, потому что передаётся значение, а не источник данных; нужно писать watch(() => status, …); так же prop передают в собственные функции. Компилятор об этой ошибке предупреждает.

Практический вывод: совет «не деструктурируйте props» из старых уроков для новых проектов устарел, а в коде на Vue 3.4 и ниже по-прежнему верен, поэтому перед правкой посмотрите версию vue в package.json. И одинаковая с виду деструктуризация ведёт себя по-разному: props компилятор переписывает, а стор Pinia — нет.

Учебный пример: фильтр заказов в адресе страницы

Условие учебное. На странице список заказов и фильтр по статусу. Список нужен и счётчику новых заказов в шапке, поэтому он живёт в сторе Pinia. Фильтр храним в адресе: ссылку можно отправить коллеге, а кнопка «Назад» вернёт прежний фильтр.

<script setup>
import { computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useOrdersStore } from '@/stores/orders'
const route = useRoute()
const router = useRouter()
const store = useOrdersStore()
const { orders } = storeToRefs(store)
const status = computed({
  get: () => route.query.status ?? 'all',
  set: value => router.replace({ query: { status: value } })
})
const visible = computed(() => status.value === 'all'
  ? orders.value
  : orders.value.filter(o => o.status === status.value))
onMounted(() => store.load())
</script>
<template>
  <select v-model="status">
    <option value="all">Все</option>
    <option value="new">Новые</option>
  </select>
  <OrderRow v-for="o in visible" :key="o.id" :order="o" />
</template>

v-model работает с вычисляемым значением, у которого есть чтение и запись: выбор статуса меняет адрес, а адрес — список. Заказы берутся через storeToRefs; если написать const { orders } = store, фильтр не увидит заказы, пришедшие после загрузки. Отфильтрованный список не хранится, а вычисляется, поэтому рассинхрона нет.

В каком порядке осваивать Vue

Каждый шаг опирается на предыдущий. Без JavaScript непонятно, почему деструктуризация ломает реактивность, без компонентов не на чем строить маршруты. Хранилище нужно, когда данные понадобились нескольким экранам, а Nuxt — когда понятна клиентская сборка и есть причина рендерить на сервере.

1. JavaScript: модули, объекты и массивы, деструктуризация, промисы и async/await.
2. Первый проект через npm create vue@latest на Vite: однофайловые компоненты, шаблон, директивы, props и emit.
3. Реактивность: ref, reactive, computed, watch, жизненный цикл компонента.
4. Vue Router: параметры и query, вложенные маршруты, проверка доступа перед переходом.
5. Pinia: состояние, геттеры, действия, storeToRefs.
6. TypeScript, тесты на Vitest и Vue Test Utils.
7. Nuxt: серверный рендеринг, загрузка данных, метатеги для поиска.

Обратите внимание на дату учебных материалов. Поддержка Vue 2 закончилась 31 декабря 2023 года, и уроки с Vue.extend и фильтрами в шаблонах описывают уходящий код. Vuex переведён в режим поддержки без новых функций, для новых приложений команда Vue рекомендует Pinia. На октябрь 2026 года стабильная ветка — 3.5, версия 3.6 на стадии релиз-кандидатов.

Шаги 2–5 можно пройти по учебнику на vuejs.org. Программа с наставником нужна ради проверки кода и законченных проектов. Например, онлайн-курс Purple School «Frontend-разработчик на Vue» начинается с Git, вёрстки и JavaScript, затем идёт TypeScript, восемь недель Vue 3 и Pinia с роутером и авторизацией и восемь недель Nuxt с серверным рендерингом и SEO. Наставник есть только в тарифе «Наставник и практика»; что именно он проверяет, уточните до оплаты.

Nuxt: когда он нужен

Nuxt нужен, если страницы должны видеть поисковики и быстро открываться с первого запроса: каталог, медиа, лендинги с данными. HTML собирается на сервере, страницы раскладывают по файлам в папке pages, данные получают через useFetch, метатеги задают в коде. Для админки за логином Nuxt избыточен, хватает Vue с Vite. По блогу Nuxt, текущая версия — 4.6 от 5 октября 2026 года; ветка 3 ещё получает исправления безопасности, поддержка Nuxt 2 закончилась 30 июня 2024 года.

Упражнения и частые ошибки

Упражнения усложняйте по одной идее: счётчик с ref, список задач с фильтром (v-for, key, computed), поиск по открытому API с индикатором загрузки и ошибкой, затем две страницы с роутером и общая корзина в Pinia. Проверяйте результат во Vue DevTools: видно, какие компоненты обновляются и что лежит в сторе.

Ошибки новичков повторяются. Меняют props внутри дочернего компонента вместо того, чтобы отправить событие родителю. Ставят v-if и v-for на один элемент, хотя руководство по стилю Vue советует так не делать. Пишут watch там, где хватило бы computed. Забывают key в списке, и при сортировке путаются поля ввода.

Если нужен не только фронтенд, а сайт целиком, посмотрите курс TeachMeSkills «Веб-разработчик»: десять месяцев, 284 академических часа, вёрстка, JavaScript, PHP и Laravel, затем блок Vue.js с компонентами, роутингом и Vuex. Раз указан Vuex, уточните у школы, разбирают ли Pinia.

Как Vue влияет на доход

Для фронтендера Vue — скорее одно из требований вакансии, чем отдельная строка в зарплате: он определяет, к каким проектам вы можете подключиться. Ориентир по деньгам — калькулятор зарплат «Хабр Карьеры»: это анкеты специалистов о фактической зарплате, а не предложения работодателей; Россия без фильтра по городу, данные открыты в октябре 2026 года. Медиана у фронтенд-разработчиков, указавших Vue.js, — 255 000 ₽ по 432 анкетам, у всех фронтендеров — 225 000 ₽ по 2 782 анкетам. По уровням у Vue-разработчиков: Junior — 113 333 ₽ (27 анкет), Middle — 217 745 ₽ (213), Senior — 330 833 ₽ (132). У фронтендеров с React: Middle — 223 583 ₽, Senior — 341 666 ₽, всего 1 073 анкеты.

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

Как выбрать обучение

Сначала проверьте актуальность программы: Vue 3, Composition API, Pinia вместо Vuex, TypeScript, Nuxt 3 или 4. Затем практику: сколько проектов проверяет человек, а не тренажёр, и есть ли проект с роутером, стором и загрузкой данных.

Бэкенд-разработчику на Python, которому нужен интерфейс к собственному сервису, подойдёт программа, где Vue изучают рядом с серверной частью. На курсе Skillbox «Фулстек-разработчик на Python 3.0» фронтенд-блок включает TypeScript и выбор между React и Vue 3 с Composition API, Pinia и vue-router, бэкенд — Django и SQL. Nuxt в описании нет, цену и срок уточните у школы.

Отдельных программ по Vue немного: чаще он входит модулем в профессию фронтенд- или веб-разработчика. Если в описании Vue упомянут одной строкой, спросите у школы, сколько недель ему отведено и какой проект делают.

Школы с программами по фронтенду, где Vue встречается среди фреймворков, собраны в общем рейтинге онлайн-школ по фронтенд-разработке: отдельного рейтинга по Vue нет. До записи пройдите первые разделы учебника на vuejs.org и соберите фильтр заказов из примера. Если модель «меняю данные, интерфейс обновляется сам» покажется удобной, Vue стоит учить глубже; если ближе JSX и ваша команда пишет на React, начните с него.