И первая тема которую я подниму: Как учить 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 марта).

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