И первая тема которую я подниму: Как учить Vue в 2025?

Тема обширная, зависит от кучи параметров и особенностей.
Но я выделю главное: у Vue отличная документация! Однако изучать ее нужно тоже верным образом

1. Первое что нужно запомнить. Документация это https://vuejs.org и перевод на русский https://ru.vuejs.org(если вам комфортно с другим языком, то используйте соответствующие ссылки с этими языками). Внимательно запомните эти 2 ссылки. Если вас поиск в сети выводит на другие документации (особенно на русском), то вы попали не туда (исключение библиотеки экосистемы Vue, тут понятное дело вы будете на их сайтах).
2. Старайтесь по возможности придерживаться оригинала, те английской версии. Переводы могут иметь свои искажения или отставания, от этого никуда не деться
3. Запомнить основные разделы доки: туториал, гайды, документация API, глоссарий, стайл гайд. Остальное это уже мелочи
4. Не стесняйтесь пользоваться плейграундом при изучении или особенно когда у вас есть вопрос который бы вам хотелось задать в сообществе. Это проще и быстрее чем разворачивать StackBlitz и тп и гораздо быстрее дает понять что вам нужно.
5. Актуален сейчас именно Composition API. Следите за этим моментом, особенно если попадаете в документацию из ссылки поисковика

Отлично. Можем начинать изучение
1. Вам нужно пройти туториал на сайте. Он покрывает только самую базовую базу и займет у вас в зависимости от навыков от пары часов до 1-2 дней. Пожалуйста, не трогайте настройки. Вам нужно использовать только Composition и SFC вариации (либо вы попадаете в пару процентов кто ВЫНУЖДЕН использовать что-то другое, но вы и так это бы знали). Эта часть проходит полностью на сайте и вам не требуется что-то у себя настраивать
2. Отлично, вы получили базовую базу, что дальше? Дальше начинаем изучение по секции гайды. Тут правило простое: идите сверху вниз и не ошибетесь, если возникает потребность то можете прыгнуть и в другое место.
2.1. Вы дошли до момента создания приложения у себя на компьютере. Тут как и в доках простой ответ: npm create vue@latest. Далее следует выбор вариантов.
- Начинать ли с TS момент спорный, если вы пришли с другого фреймворка и с TS у вас ок, то можете сразу стартовать с ним. Если же вы новичок и теряетесь даже в основах при работе даже с JS, то лучше придержать TS до момента, когда вам будет комфортно использовать Vue и без него (чтобы не мучаться и не распыляться в изучении)
- JSX. Однозначно первое время лучше отказываться от него, даже если вы реактер, который не представляет себя без JSX, вас будет это отвлекать от изучения Vue, так как дока не адаптирована к JSX пользователям. Поэтому как и с TS оставьте JSX на потом, а может вы привыкните к SFC и возвращаться не захочется
- Router. Для первого проекта - нет
- Pinia. Для первого проекта - нет
- Vitest. Для первого проекта - нет
- E2E tests. тоже лесом.
- ESLint - ОДНОЗНАЧНО ДА. Это буквально самая важная часть, включите его и сразу идите конфиг и врубайте вместо essentials - recommended пресет. Это вас будет приучать с первых минут к vue-way разработке и убережет от большого количества ошибок новичков
- Prettier - для первого проекта я бы не включал. Там есть свои особенности, лучше слегка попридержать. В последствии будет зависеть от ваших вкусов
- Vue devtools extension - попробуйте, почему бы и нет. А вот к браузерным Devtools я бы точно попробовал приспособиться, если вам будет комфортно и без них, то ваше право
2.2 Отлично, пресет для первого проекта есть. Выберите себе любой проект и реализовывайте. Если фантазия подводит, то просите ИИ-агента помочь вам выбрать идею для первого проекта, работает неплохо.
2.3 Вы должны пройти весь Vue essentials блок гайдов и сочетайте по необходимости с блоком Components in Depth.
2.4. Я не зря упоминал блок глоссарий. Он специально создан для разъяснения терминов. Пользуйтесь
2.5. Не стесняйтесь обращаться за разъяснением сложных и непонятных моментов в чаты по Vue: @vuejs_ru / @vuejs_club (не забывайте о использовании плейграунда по необходимости)

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

4. Вы вполне неплохо освоились во Vue. Теперь можете спокойно пробовать работать с SSR, например Nuxt. Знакомство до этого момента принесет вам много боли, поэтому я специально отложил этот пункт. Также вы теперь достаточно опытны, чтобы погружаться в глубины Vue. Заходите на API и погружайтесь в незнакомое.
2.6.

Вот такой пока получился путь для самостоятельного изучения Vue. Да он не покрывает и 60% всех возможных рекомендаций, но это точно скелет которого я бы хотел чтобы придерживались и остальное шло к нему опциями.
Буду рад ответить на ваши вопросы по данному роудмапу

FAQ:
Брать ли курсы по Vue - я не вижу в этом смысла. Большая часть того что на ютубе либо устарела, либо еще какие причины могут сильно подпортить знакомство (уровень автора, навыки преподавания, сомнительные практики и тд)

Обучаться с AI. Я бы не стал четко общаться с ИИ для изучения Vue, она частенько пытается откатиться к устаревшему API которое есть у нее в базе, либо делает выводы на его основе. Если вам очень хочется, то обязательно уточняйте Vue3+Composition API. Я еще попробую составить гайды по изучению Vue в паре с AI в будущем

Кого можно смотреть для качественного контента по Vue? Сложный вопрос. Я пока над ним думаю. Старый но мега крутой контент у Ильи Климова, на этом я бы пока закончил

Какие библиотеки использовать со Vue?
Тоже частый вопрос это стек относительно мира Vue.

Попробуем накидать базовый стек для нового среднего Vue3 проекта в 2025

1. vue-router - официальный роутер в мире Vue. Очень стабильный, простой в использовании и удобной интеграцией в devtools. Пропитан реактивностью и в целом покрывает львиную долю задач.
1.1 официальное развитие идеи роутера unplugin-vue-router от самого автора vue-router. Главное это возможность работы в Nuxt-like стиле file-based routing. Также есть фичи которые экспериментальны для vue-router: дата лоадеры, типизация роутов. Не рекомендую для первых проектов
1.2 Альтернативный роутер. Да-да если вам нетерпится то Vue никак вам не навязывает сосуществование только с родным роутером: kitbag,

2. Стейт менеджмент: Pinia. Официальный и крайне простой стейт менеджер для Vue. Изучается быстро, настройки минимальны. Знаешь Vue = знаешь Pinia.
2.1 Vuex - официально устарел и pinia его продолжатель. Поэтому если вам попадаются уроки связанные с Vuex, то можете их закрывать
2.2 Обязателен ли стейт менеджер? Нет, vue спокойно работает и без них на основе своей мелко-зернистой реактивности и композаблов. Единственное что вам будет чуть сложнее с HMR и интеграцией с Devtools. Также может оказаться сложнее такие решения дружить с SSR, поэтому тут выбор остается за вами, но на рабочих проектах шанс встретить pinia крайне высок
2.3 Рекомендую использовать вариант с setup-like сторами, а не options api like.

3. ESLint Plugin Vue. Писал и буду писать, что пока вы начинающий то это MUST HAVE. Почти всегда на тестовых заданиях именно отсутствие привычек выработанных vue гайдлайнами выдают неопытного разработчика, поэтому ставьте его себе без вариантов.
3.1 Плагин предоставляет несколько пресетов, вы должны использовать вариант с recommended. Он гораздо более жесткий чем по-умолчанию essentials.
3.2 Там еще множество опций есть которые возможно настроить. Неплохо пробежаться по ним если вы планируете проект для множества людей, так как он позволяет закрепить некоторые варианты использования Vue едиными на проекте (например запретить style scoped или скрипты без ts)
3.3 Prettier. Оставляю выбор за вами, мне комфортно и без него, но много кому он очень нравится. Но первый проект как и писал лучше обойтись без него

4. Vue Devtools. Рекомендую как минимум ознакомиться и понять какие проблемы он может вам решить. В целом не супер обязательная штука, многие и без них чувствуют себя комфортно. Но как по мне они часто экономят тонну времени при дебаге или изучении новых проектов

Далее идут сугубо опциональные части на ваш выбор:
5 VueUse для устранения большей части рутины связанной с логикой vue. По сути это lodash для мира реактивности Vue. Много полезного и бесполезного. В любом случае можно читать исходники и забирать себе отдельные композаблы в виде кода при желании.
6 tanstack/query vue - Не рекомендую ставить в первое время, Vue в общем случае и так позволяет легко использовать API для запросов. После того как почувствуете плюсы и минусы можете пробовать и ее. В целом же это библиотека для управления асинхронным удаленным стейтом (например данные сервера). Кстати альтернативой может послужить Pinia Colada от создателя Pinia.
7 Если нужен SSR, то это Nuxt или vike. Вы можете и попытаться сами написать свой SSR на Vite
8 Выбираем ui либу на свой вкус. Выбор достаточно большой и думаю заслуживает отдельного разбора. Но стабильным выбором для погружения: primevue(золотая середина по гибкости и изкоробочности), quasar(более old style подход, но большая и стабильная), shadcn(неофициальный порт shadcn react). В целом со списком базовым набором актуальных UI библиотек можно ознакомиться тут.

Это основные части которые могут понадобиться в большинстве проектов. Конечно тут мы не захватили еще работы с валидациями, формами, иконками и много еще чем другим, но обязательно сделаем это в других постах отдельно, но если есть пожелания или считаете, что я забыл что-то подсветить, то обязательно укажите мне это в комментариях

Директивы во Vue

Попытка номер 2. Первую уничтожил telegram шикарным UX.

Частая причина страха или недоверия ко Vue у начинающих и пользователей других фреймворков возникают из-за "магических" директив. На самом деле изучить их можно крайне быстро и на самом деле их не так и много.

Для вашего удобства вот все существующие директивы во Vue разбиты на 3 категории:
🟢 Используется на почти ежедневной основе и знать обязательно
🟡 Тоже используется часто, но ситуативно, можете повременить с их изучением, но рано или поздно вы к ним придете
🔴 Можете забыть о их существовании. Это что-то совсем редко используемое или для совсем специфичных вещей. С большей частью из этого списка, скорее всего, вам не придется работать никогда. А если понадобится вы их и так легко найдете "по нужде"

Зеленую группу можно разделить на 2 части: те что управляют процессом рендеринга (v-if / v-else-if / v-else / v-for) и связывание данных (v-bind / v-on / v-model). Вот по сути и все что нужно знать в самом начале.

Таким образом вы можете сосредоточиться пока только на зеленой группе. Отложив желтые на потом. А красные изучите уже только если из любопытства.

Частый вопрос от людей из других фреймворков: "а нафига вообще эти директивы? Неужели нельзя было сделать как в X"

Ответ достаточно простой: Vue шаблоны почти полностью совместимы с HTML и наоборот, почти любой HTML валидный шаблон. И этот баланс стараются держать в рамках разумного.

Какие же фичи это дает и почему это важный аспект? Я понимаю, что большинство из вас спокойно используют сборщики и ставят все из npm-а.
Однако большой пласт сайтов все еще использует Vue подключая его с CDN и даже без использования этапа сборки. И вот тут режим компиляции шаблонов на лету играет свое. Vue шаблон спокойно парсится родным парсером HTML в любом браузере поддерживающем Vue и это стоит гораздо дешевле если бы писали кастомный парсер шаблона или тем более из jsx (где нужно пересобрать весь JS код).

И так, шаблон может быть буквально сгенерирован в HTML-е (например через PHP шаблонизатор), а Vue уже просто оживляет их. Те это не просто вставки <div id="app"></div>. А буквальный шаблон приложения который можно оживить. Похожим по духу образом работают решения класса Alpine и HTMX. Те мы можем в скрипте насоздавать компонентов, но что и как будет оживляться решит уже шаблон приложения. И это очень удобно для постепенного переезда или оживления сайтов с PHP-first (например).

Ну и обратная сторона. Новичков достаточно легко обучить, так как зная HTML они почти сразу могут писать шаблоны на Vue оживляя его по мере изучения.

Поэтому использование директив это закономерный исход HTML-first подхода и переход от них к другим вариациям (как в Svelte или Angular уже крайне маловероятен). Надеюсь теперь вам стал чуть лучше понятна причина некоторых решений в дизайне API. Которая из-за этого порой теряет красоту или часть функционала, зато позволяет работать очень мощным фичам. Да, эта фича нужна ой как далеко не всем, но тем кому нужна, те рады ее существованию, так как достойных альтернатив не много.

Ну и на последок я накидал совершенно базовый пример c такой работы со Vue без сборок и просто в шаблоне. В нем я оживляю все кусочки помеченные как vue-alive (пример поддерживает и оживление компонентов, но это подусложнило бы код).

PS. Для тех кто скажет, что суть Alpine и HTMX вообще в другом, то есть PoC который гораздо ближе к ним по духу: vue-petite у которого цель буквально оживлять директивами кусочки HTML-я c помощью реактивности Vue

И так напоминалка о том что каждые пол года нам открывают полный доступ к базе 1 из 2 основных школ специализирующихся на Vue и Nuxt

В этот раз бесплатные выходные будут у vueschool(с 1 по 2 марта).

Я не могу назвать курсы прям суперскими и мастхэвными, но любители у такого всегда есть. Их там большой выбор, может чего и приглянется

Ограничения возможностей шаблонов Vue.

Можно сколько угодно любить шаблоны Vue, но так или иначе у них есть сценарии которые вызывают порой боль. Vue шаблоны изначально делались как разумный компромисс между функциональностью, гибкостью и простотой понимания, но как мы узнали в предыдущем посте, то все также важна возможность парсинга HTML парсером. Те да, буквально какой-то функционал откидывался в угоду простоте и прозрачности в понимании и лично Эван отказывался от них. В итоге некоторые проблемы не имеют прямых и официальных решений из коробки (почти):

1) Переиспользование одного блока кода в 2+ местах

<a v-if="">
  <!-- Part A -->
</a>
<template v-else>
  <!-- Part A -->
</template>

2) Создание локальных констант.

<MyComplexFrom>
  <template #={ basicData }>
    <div> {{ formatData(basicData).text }} </div>
    <input
      model-value="formatData(basicData).value"
      @update:model-value="formatData(basicData).onChange($event)"
    />
    <!-- проблема очевидна, особенно в цикле -->
  </template>
</MyComplexFrom>

3) Явное определение дженерик компонентов

<MyStrangeComponent<User> data="basicUser" @update="cartUserUpdate">
<!-- Пример наобум. когда четко указанные тип позволяет избежать преобразований типов излишних, но HTML конечно же такое не распарсит -->

Да, все это далеко не то что встречается каждый день. И можно спокойно жить годами без этих возможностей, кто-то вообще не сочтет их за реальные сложности. Но да, это все-таки ограничение возможностей html-шаблонов (но не Vue!) и каждая из этих проблем заслуживает отдельного обзора, так как имеет множество решений (да, все не настолько плохо, как могло показаться по посту). Поэтому в следующих постах мы их с вами разберем. И конечно это далеко не все ограничения...

А с какими ограничениями возможностей шаблонов во Vue сталкивались вы?

Главные слабости шаблонов Vue: Переиспользование одного блока кода в 2+ местах

Как и ожидал, прошлые проблемы не воспринимаются многими как проблемы, особенно если они пишут только на Vue. У вьюшников уже выработанная ментальная модель обхода таких ситуаций. Однако рассмотрим как решить эту проблему для тех, кто еще не сильно знаком со Vue:

issue

<a v-if="condition">
  <!-- Part A -->
</a>
<template v-else>
  <!-- Part A -->
</template>

Мы видим, что какой-то блок кода может повторяться в коде компонента 2+ раза и что же мы можем с этим сделать?

1. Очевидный copy-paste

<a v-if="condition">
  <div class="card"> {{ text }} </div>
</a>
<template v-else>
  <div class="card"> {{ text }} </div>
</template>

Когда информации не так много, то мудрить и не надо, просто копируем и вставляем
+ моментальная реализация
+ легко понять
- нужно следить, чтобы значения всегда были одинаковыми (а быстрый хот-фикс легко такое ломает)
- это некрасиво, чем больше кода тем больше это попахивает
- это усложняет чтение с размером такого блока

Поэтому данное решение оптимально для случаев когда информации имеет смысл продублировать совсем немного

2. Вынос в компонент
Ощущается как самый лучший вариант. Мы же делаем декомпозицию! Разбиваем блоки!

<a v-if="condition">
  <MyScopeCard :text />
</a>
<template v-else>
  <MyScopeCard :text />
</template>

И вроде действительно решает 80% потенциальных проблем. Остается лишь вынести все данные в пропсы / слоты, / ивенты / модели

+ очевидное решение
+ не самая сложная реализация
- Такой компонент не всегда имеет целостность, те по факту он сугубо оказывается прибитый гвоздями к конкретному компоненту и без него не имеет смысла
- Если нужно прокидывать много данный то приходим отчасти к варианту 1, нам все также нужно следить за идентичностью передаваемых пропсов и слотов

<a v-if="condition">
  <MyScopeCard :text :user @save="onSave" @load="onLoad" ... />
</a>
<template v-else>
  <MyScopeCard :text :user @save="onSave" @load="onLoad" ... />
</template>

- Это плодит порой излишние сущности, даже там где они особо не нужны (если нам нужно обернуть кусочек в ссылки или не делать его ссылкой по условию, то это не звучит как повод выделять это в отдельный компонент, да-да можно пойти от обратного и вынести в компонент <ConditionalWrapper wrapper="a" :condition >)

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

3. использовать createReusableTemplate

<script setup>
import { createReusableTemplate } from '@vueuse/core'

const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
</script>

<template>
  <DefineTemplate>
    <!-- Part A -->
  </DefineTemplate>

  <dialog v-if="condition">
    <ReuseTemplate />
  </dialog>
  <div v-else>
    <ReuseTemplate />
  </div>
</template>

+ все связанные данные остаются в рамках компонента в котором они имеют смысл (однако тщательно обдумайте вариант 2, возможно вам действительно нужен отдельный компонент)
+ мы не плодим лишних сущностей
+ у нас есть лишь 1 копия и нам точно не надо париться об переиспользовании
+ подход крайне гибок, но за счет избыточности его не хочется применять на каждый чих (меня радует в этом плане баланс)
- требует зависимость
- обладает некоторой избыточностью с небольшим "протеканием" шаблонов в script
- осуждение от коллег придерживающихся подхода, что можно применять вариант ответа только 1 или 2

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

Есть конечно и другие варианты
1) Ухитриться использовать <component :is="condition ? 'div' : 'a'">, но он не всегда возможен, особенно если они расположены раздельно или template это псевдо-компонент и указать его там не выйдет
2) Использовать <script setup lang="jsx"> и описать на JSX, стоп, вы действительно хотите смешать 2 стиля шаблонов в 1 файле?
3) Переразбить компоненты так, чтобы внешняя часть стала утилитарным компонентом (пример с <ConditionalWrapper wrapper="a" :condition >)

В коммах оставлю как это решается в других типах шаблонов

Nuxt: Compodium

Nuxt можно много за что не любить. Но что я люблю в Nuxt, это какие классные решения они приносят в мир Vue и не только

Я давно восхищаюсь проделанной работой над Nuxt DevTools и сейчас это без сомнения самые лучшие DevTools из всех что существуют для фронта и одна из причин это возможность встраивать кастомные расширения в него же. И сейчас речь идет об одном из них: Compodium

По сути это миниатюрный аналог сторибука для вашего Nuxt проекта и который доступен прямиком из девтулзов Nuxt. В нем вы можете посмотреть существующие компоненты и поиграться с ними получив нужный код и скопировав (те, тут заточка больше на плейграунд для компонентов).

Проект пока на ранней стадии. Но вы уже можете начать отслеживать как оно продвигается и поиграться с демкой на CodeSandbox.

Магия работает на основе метаинформации компонента и использования дополнительной функции в компоненте

extendCompodiumMeta({
  defaultProps: {
    propName: provDefaultValue
  }
})

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

Нам пообещали новую версию Vue Language Server. Пока не знаю что от нее ожидать, но попытка заигрывания с TS сервером стоила Vue многого, надеюсь это исправит главную причину нестабильности в плагинах Vue

Глубокий Vue

Как изучать Vue разработчикам с опытом которые уже доки знают неплохо, но хотят двигаться дальше?

Самый логичный ответ: вперед штудировать исходный код Vue!
Отличный вариант но... это весьма муторно и трудоемко, а многих в целом может отпугнуть от погружения

Неужели нет годных статей и выступлений? Есть, но выискивать их трудно, а следить за их актуальностью и появлениями еще сложнее. Неужели нет варианта лучше?

На самом деле есть: это подход create from scratch(создать с нуля)
Те мы берем Vue и пытаемся воссоздать его с самого нуля тем самым знакомясь с его механизмами и почему были сделаны те или иные решения.

К счастью, уже есть проект который сосредоточен на объяснении всего этого доступным языком: chibivue. Книга готова не на 100%, но большая часть уже проделана и возможно к определенному моменту вы и так будете готовы к чтению исходников. Что хорошо в книге не только теория, но и большое количество примеров с плейграундом. С ней вы создадите Vue самостоятельно и познакомитесь как все работает под капотом.

Кстати, проект затрагивает исходники не только Vue, но и других проектов:
- изучение исходного кода Vapor
- пишем свой VueUse (проект в глубокой разработке еще)
- nuxt (проект в глубокой разработке еще)
- vite (на зачаточном этапе)

PS Запили с нейронками RU версию chibivue
PPS Так-то и английская версия сайта это результат работы нейронки(переводится через GPT-3.5 автоматизированно), оригинал пишется на японском

Lynx-vue

Я думаю многие слышали о выходе Lynx (считайте что это "убийца" ReactNative от ByteDance(TikTok)). Ключевая особенность Lynx в том что он не привязан к jsx и может использовать любой формат (как и в NativeScript), но из коробки официально Lynx идет с React-like API (на самом деле на основе более легковесного Preact).

Соответственно Vue у которого для нейтива только всякие capacitor, cordova и прочие их производные, а Vue+NativeScript(nativescript-vue) все еще сырой, то нам нужна достойная альтернатива для кроссплатформы и вот Lynx дал прекрасные шансы для этого.

Итак к делу: [Feature] Vue Integration
Это ишьюс по добавлению интеграции Vue официально. Давайте поддержим лайками (НЕ ПИШИТЕ +1 В ИШЬЮСЕ) и будем верить, что это найдет какую-то реакцию (если она будет, то я вам сразу сообщу :D)

А это точно иммет смысл просить? Однозначно, никто за язык не тянул их)

It’s probably less than one would think… we already had production uses or prototypes for Solid and Vue flavor before making that statement in our blog

Что насчет других фреймворков?
- Svelte [issue]
- Solid.js (обсуждение на reddit)
- Angular (ничего толкового не нашел)Й

Дождались! NativeScript-Vue 3.0 вышел из беты (которая длилась почти 2 года).

Для тех кто не знаком с NativeScript, это попытка сделать "интероп" на JS между нативной частью приложений и JS.
У вас сохраняется поддержка CSS, но при этом вы можете собирать приложения для Mobile/Web на нем же. А соответственно NativeScript-Vue это прослойка для поддержки Vue3 в NativeScript

- Чем принципиально отличается от PWA и Cordova/Capacitor?
- Это не WebView, соответственно он ближе к нативной платформе и вы можете использовать нативные плагины с ним достаточно легко. Соответственно при использовании конкретных компонентов также будут использоваться системные компоненты из соответствующей OS

- А будут ли у меня DevTools?
- Да поддержка Vue Devtools имеется

- А насколько его можно уже использовать?
- Заявлено уже, как feature-complete. Проект был достаточно долгое время в бета-версии, так что надеемся на относительную стабильность. Я же скажу, что инструмент не самый популярный, поэтому для чего-то серьезного лучше отнестись к нему особой осторожностью, а вот реализовать на нем пет-проект, почему бы и нет

В целом радостная новость, что наконец-то у Vue3 появляется хоть что-то для противопоставления ReactNative, который доминирует в мире JS-кроссплатформы (и в целом имеет нехилую популярность в мире кроссплатформенных решений)

P.S. Хотел немного актуализировать дела и по Lynx, но там так и не появилось действительно стоящих сигналов, все что могу сообщить, есть попытки переноса, но до чего-то реально рабочего там пока далеко. Эван Ю и команда Lynx заявляют о готовности предоставления помощи с разработкой, но каких-то официальных анонсов или новостей об официальных разработках не было (хотя из X есть информация, что команда Lynx запускала прототипы с Vue)

State of Vue 2025

Вы точно слышали об опросах State Of JS/CSS и тд вплоть до React и AI. Vue же под конец прошлого года тоже делал свой опрос.
И вот наконец-то появились результаты. На самом деле очень объемная статья с результатами, так что TLDR выдать сложно, но я пытаюсь пройтись по интересным моментам:

1. Интервью с Эваном.
В целом ничего нового тут нет. +- все это он говорил и на других интервью и выступлениях: оптимизация реактивности в 3.6, Vapor Mode и что он сейчас главный фокус команды. Вот разговоры относительно VoidZero были интереснее. Достаточно много деталей было сказано относительно бизнес модели: тут он повторил слова, что в планах делать какой-то узко-заточенный туллинг для энтерпрайза и этим монетизировать open source разработку. Заверяет, что наличие каких-то платных решений никак не скажется на открытой части и он ставит всю свою репутацию на это.

2. Vue в цифрах
- Согласно статистике BuiltWith Vue наиболее популярен в США (1,8кк) Германии (161к) Китае(127к) РФ(100к) и Англии (96к).
- Неплохая статистика относительно популярностей фреймворков
- Зависимости в NPM. Тут скорее удивил React, который с 2022 года с 84к зависимыми от него пакетами вырос до 240к в 2024. У Vue c 53к до 80к
- W3tech статистика показывает, что Vue пользуется популярностью у сайтов с высоким трафиком, значительно обходя в этом показателе React (передаем привет любителям мантры про Vue для маленьких проектов)
- Ванильный Vue предпочитают гораздо больше чем мета-фреймворки. Самая читаемая статья на сайте, это про интеграцию с Laravel
- На данный момент сертификаты разработчиков получили более чем 900 разработчиков (и проценты в 80%+ относительно удовлетворенностью сертификацией) [стоит помнить, что Vue School ее организовал и поэтому заинтересован в ее продаже]

3. Результаты опроса Vue.js разработчиков
- приняло участие 1428 разработчиков. У state of react было 7,8к (но Vue опросник, мягко говоря, был гораздо менее разрекламирован)
- 96% принявших опрос используют Vue3
- 82% предпочитают использовать TS
- 80% используют Pinia для глобального стейт менеджмента
- 68% используют/ли Nuxt в своих проектах
- Статистика по Nuxt: SPA - 62% SSR - 96% SSG - 40%
- 53% принявших опрос используют Vue уже больше 4 лет (сильное отклонение в пользу опытных разработчиков)
- 98% участников используют в качестве источника знаний о Vue документацию, а курсы только 36%. YouTube же набрал только 3%
- 57% принявших вопрос указали как язык бекенда в организации.. Node.js (вот этого точно не ожидал), PHP же набрал только 37%, а golang 12%
- 35% сталкивались за последний год с Vue2.7, а 2.6- только 19%
- И теперь мякотка: 55% респондентов... из РФ (кажется мы перестарались с раскидыванием этого опроса :D)
- 33% используют Options API. 5% class based api
- 75% используют scoped стили, 7% CSS module. 56% не пишут стили (сюда попали TW и тп решения, но все равно это очень много)
- Относительно того чего не хватает разработчикам произошел сильный разброс: 21% чего-то не хватает в экосистеме (интересно чего), 15% не хватает текущих возможностей для мобильной разработки, проблемы с TS отметили 13% (что весьма мало)
- Относительно главных проблем во Vue: 25% отметило проблемы с миграцией (ожидаемо), 17% проблемы с туллингом (тут скорее всего речь о проблемах с поддержкой в редакторах), 13% находят проблему с поиском работы
- Сделали отдельную статью по решению проблем во Vue (достаточно поверхностно)
Кратко: относитесь с осторожностью к результатам. Так как участников было мало, то высока вероятность перекоса в зависимости от сообществ где продвигали этот порос (в одном только дискорд сервере Nuxt 28к участников)

4. Что нового в Nuxt
- За счет фиксированного графика релизов и их способа монетизации Nuxt не нуждается в hype-driven development
- Говорят о важности повышения стабильности релизов, повышения покрытия регрессионными тестами, изоляции экспериментов
- Все еще делают огромную ставку на UnJS экосистему, отмечая ее рост и новые пакеты

5. Миграция на Vue3 + Перфонс во Vue
Тут были рассказы от разных компаний и с какими трудностями они столкнулись при переходе на Vue3. На самом деле там каждый отчет на статью отдельную тянет, поэтому оставлю изучение ее на вас

6. Что ждать дальше?
- Vapor Mode это доказательство, что Vue открыт для изменений и значительных, глубоких улучшений при этом сохраняя стабильность и обратную совместимость
- Vue успел набрать достаточную массу контента, чтобы AI умело неплохо с ним работать. Ожидается прирост с этого направления
- Все делают очень большую ставку на Vapor моде (по моему мнению чрезмерную)

На самом деле проделана просто гигантская работа ребятами, чтобы собрать столько информации, за что им большое спасибо! Жаль, что в основном опросе было настолько мало участников, но в остальном информации и интервью было с избытком

Framer Motion Vue

Произошел официальный релиз Motion от Framer для Vue.

Что это?
Современная библиотека для управления анимациями во Vue. Изначально завоевала всеобщую любовь в мире React.
Ключевой особенностью Framer Motion это декларативный контроль над анимациями через компоненты, а не ручное управление.
Имеется широкий спектр возможностей от анимации базовых значений, до анимаций перемещений по лейаутам страницы. На данный момент это становится самой продвинутой библиотекой для анимаций созданных для Vue (тот же GSAP не имеет столь тесной интеграции со Vue, а у TresJS цель не в анимациях)

<template>
  <motion.div 
    :whileHover="{ scale: 1.1 }"
    :whilePress="{ scale: 0.9 }"
  />
</template>

На самом деле проект не новый и изначально делался в рамках экосистемы unovue и у него даже была отдельная дока. Но в последствии его забрали в основной гитхаб motion. Разработчики остались те же и они продолжают отвечать за этот же репозиторий.

Кстати говоря, это не единственная попытка выдать схожее поведение. У родственной для unovue экосистемы в виде oku-ui тоже есть свой motion. Сравнивать их я не буду, визуально по API мне больше нравится вариант oku ui в нем больше ощущается vue way, но framer motion гораздо больший по фичам. Оба в качестве ядра использовали фреймворк-агностик версию Motion. Однако дополню что oku motion сейчас в режиме архива на гитхаб, что достаточно грустно видеть

Еще одна ложка дегтя: Motion имеет платную разовую версию Motion+. В нем имеются "премиальные" возможности и компоненты, но в целом и без них прожить можно. Ценник правда ни разу не демократичный: 300 евро для 1 пользования и 1500 для компаний (10 лицензий)

Другие аналоги:
vueuse/motion - из экосистемы vueuse достаточно лаконичное и простое в использование API. В целом большую часть простых задач покроет и выполнен в "магическом стиле" присущим antfu.

встроенные возможности во Vue/CSS - в целом покрывают уже львиную долю потребностей, но могут быть несколько более объемными в описаниях и обладать ограниченной поддержкой (например @starting-style не имеет полной поддержки в Firefox)

class based animation - это любые решения опирающиеся на классы для анимаций: tailwind animation. unovue animations, animatie.css и тп. Тут обычно ограниченный набор возможностей, либо ограничения из варианта выше, зато для базовых сценариев замечательный вариант

api integration - сюда отнесем все решения которые не имеют тесной интеграции со Vue, но вы можете достаточно легко интегрировать через API их в свои приложения GSAP, Anime.js и тд

В целом, это хорошая новость для экосистемы Vue, но осадочек из-за отделения от экосистемы unovue остался. Например тот же Radix Vue смог перерасти оригинал и стать Reka ui, боюсь что с "официальной поддержкой"(менйтейнер же все равно член unovue) такого не будет возможно.

Локальные переменные в шаблонах

Вновь возвращаюсь к посту о главных слабостях шаблонах Vue(решение первой проблемы). И следующим на очереди у нас "невозможность создания локальных переменных в шаблонах".

Что это и когда оно нужно?
1. Вам нужно нужно обработать значение внутри v-for

<template v-for="item in items">
  <div> {{ formatData(item).text }} </div>
  <input v-model="formatData(item).value" />
</template>

2. Вам нужно обработать значение пришедшее из scoped slot

<MyComplexFrom>
  <template #={ basicData }>
    <div> {{ formatData(basicData).text }} </div>
    <input v-model="formatData(item).value" />
  </template>
</MyComplexFrom>

Так как значение прилетает к нам из вне мы не можем положить никак его в computed или попытаться мемоизировать

3. Доступ к вложенным значениям. Ситуация для опытных вьюшников почти нереальная, но подсветить ее стоит

<div> {{ item.user.info.text }} </div>
<input v-model="item.user.info.text" />
<!-- хочется условного сокращения до userText -->

А это реально проблема?
Опытные разработчики на Vue знают как ее обойти, но количество запросов на эту фичу достаточно большое (25+ по поиску в RFC и ишьюсах). И я в целом вижу запрос на данную функциональность у разработчиков, особенно в сравнении с другими фреймворками. Эван Ю же отказывался от возможности добавлять переменные в шаблоне для сдерживания количества логики в шаблонах их и мотивации разработчиков использовать другие инструменты

Как решать?
1. По возможности выносите логику из шаблонов, например в computed, это не всегда возможно (например в ситуации 2), но пока есть такая возможность это стоит использовать, особенно для 3его случая. Думаю тут все достаточно очевидно, но люди порой ленятся заниматься такими мелочами

2. Выносите участки шаблона в компоненты. Тут тоже все достаточно просто, вы можете унести шаблон в отдельный небольшой компонент в который передадите вычисленное значение, таким образом вы будете чаще использовать декомпозицию компонентов и при этом сохранять производительность за счет однократного вычисления значений. Этот метод особенно хорош для 2-ого случая, так как Отдельный компонент под scoped slot обычно достаточно легко вписывается в логику компонента

Первые два решения должны быть для вас основой! Остальные решения это ближе к костылям и другие Vue разработчики могут не одобрить ваш выбор!

3. Использование хака с атрибутами.

<template v-for="item in items" :set="formatted = formatData(item)">
  <div> {{ formatted.text }} </div>
  <input v-model="formatted.value" />
</template>

Что это за :set=? Это какое-то специальное свойство о котором нам не сказали? Нет, вы можете использовать любой нейминг с несуществующим атрибутом. Он нам нужен чтобы заабьюзить создание локальной переменной (полностью механику раскрывать не буду, с ней вы можете поиграться в плейграунде, просто зайдите на вкладку с собранным JS). Я бы использовал этот случай только если вам нужно что-то очень быстро проверить и выпилить его из кода.

Минусы:
- неявное решение с абьюзом способа компиляции шаблона
- это все-таки аттрибут и он попадает в HTML шаблон (решение :set="void (x = y)" но это выглядит еще хуже)
- это поведение сломано в Vapor
- нет типизации

4. Использовать специальный компонент который будет прокидывать вам значение из scoped slot-а.
Решает почти все проблемы из 3его пункта:
- использует все механики честно, пусть и не самым привычным способом, поэтому сложно его сломать
- никак не влияет на HTML
- работает в Vapor (на самом деле есть там своя тонкая специфика относительно ленивых пропсов, но это скорее про перф, а не про сломанную работу)
- работает типизация

Минусы
- Дополнительный уровень вложенности в шаблоне
- Слегка бойлерплейтный
- Нужно тащить в кодовую базу или установить
- Нужно импортировать в каждом компоненте (но в теории можно 1 раз зарегистрировать его как глобальный компонент)

Стоит оно того или нет, решать вам, но если первые 2 решения не подходят, а выкручиваться надо, то однозначно лучше воспользоваться им

Сегодня захватим много контента по новостям Vue 💚