Vue 2 в 2025 году официально стал legacy, но множество проектов всё ещё работают на нём. Миграция на Vue 3 не всегда возможна сразу, поэтому важно правильно поддерживать и модернизировать старый код.
В этой статье разберём:
Устаревшие паттерны, от которых лучше избавиться.
Проверенные подходы, которые остаются актуальными.
Альтернативы из Vue 3, которые можно адаптировать уже сейчас
Пришел к хитрому паттерну. Делюсь.
Будет полезен тем кому нравиться или приходится работать с Vue.
В подходящей ситуации он сэкономит кучу времени и поможет избежать дублирования кода.
Зачастую обычные веб-приложения не покрывают E2E тестами, однако, когда разговор заходит об административных панелях, формах биллинга и разнообразных конструкторах, то данная потребность быстро возникает.
В этой статье мы рассмотрим, как правильно организовать селекторы для тестирования веб-приложений.
Этот документ — не просто список, а выжимка боли, шишек и неожиданных открытий, с которыми сталкивается почти каждый фронтендер. Неважно, Vue ты выбрал или React, если твое приложение должно работать в браузере на айфоне пятилетней давности — добро пожаловать в клуб. Здесь будет всё: от странностей с Safari до неожиданных проблем с синтетическими событиями.
Нюансы мобильных браузеров и PWA
iOS Safari не поддерживает Notification API без установки PWA
Проблема: На iOS ты не можешь просто вызвать new Notification(...) — API будет недоступно, пока пользователь не установит сайт как PWA на домашний экран. Так же, в Safari просто не будет доступен класс Notification, браузер его просто не имплиментирует на этапе браузерного окна.
Решение:
- Чтобы проверить можно ли использовать уведомления можно написать следующую проверку:
typeof window !== 'undefined' && 'Notification' in window;
🔗 [MDN — Notification API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API)
🔗 [WebKit — Push Notifications](https://webkit.org/blog/12945/meet-web-push-on-ios/)
Устали от бесконечных споров о CSS-методологиях? В этой статье я рассказываю, как объединил БЭМ и Tailwind в мощный гибридный подход, который спас мой проект и нервную систему. Узнайте, как избавиться от мучительного нейминга, решить проблему с отступами и ускорить разработку в два раза.
Никакого догматизма — только практический опыт и реальные примеры использования лучших сторон обоих подходов.
ClientOnly в Nuxt - это не просто костыль для исправления SSR-ошибок, а многофункциональный инструмент с неожиданными преимуществами. Разбираемся, как этот компонент может ускорить загрузку приложения, улучшить пользовательский опыт и даже создать дополнительный уровень защиты от ботов.
Серьёзно о несерьёзном и с юмором о технологиях — обо всех секретных суперспособностях вашего любимого компонента-невидимки.
Привет, Хабр!
Сегодня разберём один из недооценённых, но крайне полезных инструментов во Vue 3 — <Teleport>. Это встроенный механизм, который позволяет рендерить часть шаблона вне текущего DOM‑контекста. Он нужен при реализации модалок, тултипов и других компонентов, которые должны «выпрыгивать» из дерева компонентов, но при этом сохранять реактивность, фокус и доступность. Без этих костылей, z-index: 9999 и appendChild.
Привет, Хабр!
В этой статье рассмотрим, что такое композиционные хуки во Vue 3, зачем они нужны и как их использовать.
HTML Builder — визуальный конструктор HTML-структур с drag-and-drop интерфейсом для библиотеки @vue-dnd-kit/components!
🔹 HTML Builder позволяет создавать HTML-структуры без написания кода
🔹 Включает рабочую область, палитру компонентов, дерево элементов и панель настроек
🔹 Сейчас это ранняя бета с минимальным функционалом, но уже можно оценить концепцию
Идеально подходит для создания прототипов и визуальных редакторов CMS.
🔗 Демо: https://zizigy.github.io/html-builder/
🔗 GitHub: https://github.com/ZiZIGY/html-builder
Ищу обратную связь по UI/UX и функциональности. Какие фичи хотели бы видеть? Что можно улучшить в интерфейсе? И тд тп.
Представляю vue-dnd-kit/components — готовые компоненты для быстрой разработки drag & drop интерфейсов в Vue 3!
📋 Сортируемые таблицы
📊 Канбан-доски
🌳 Древовидные структуры
🧩 Интерактивные дашборды
CLI работает как shadcn/ui — компоненты клонируются в ваш проект, давая полный контроль над кодом. Проект в активной разработке, но уже готов к использованию!
Готовые компоненты: Table, Kanban, Tree, Dashboard.
Статус: бета, API может изменяться. Подходит для прототипов и активной разработки.
Если вы работаете с Vue 3, вы точно сталкивались с ref() и reactive(). Обе функции из Composition API делают значения реактивными — но делают это по-разному. И хотя документация Vue чётко указывает, что использовать в каком случае, она редко объясняет, почему это важно и что может пойти не так, если использовать не тот инструмент.
Вот ссылки на официальную документацию — на всякий случай:
Каждый разработчик рано или поздно сталкивается с вопросом: как организовать проект так, чтобы он не превратился в хаос? Или как исправить проект, в котором уже царит хаос?
Начинается всё одинаково: мы делаем простое MVP или проект с ограниченным функционалом, не заморачиваемся по поводу архитектуры и организации кода, ведь проект небольшой и несложный, а сделать его нужно уже здесь и сейчас. Но время идёт, и у бизнеса появляются всё новые требования. Какие‑то изначальные идеи полностью отменяются или меняются до неузнаваемости, разрастается команда, дизайн меняется несколько раз, появляется необходимость покрыть проект тестами, а иногда и необходимость вообще сменить стек технологий. И вот вы уже работаете над кодом, в котором становится всё сложнее вносить изменения в существующий функционал. Всё держится на костылях, становится трудно ориентироваться в куче файлов, и кажется, что всё устроено как‑то не так, как должно быть.
В этот момент мы начинаем задаваться вопросом: «а как нужно писать и организовывать код на самом деле?». В поисках ответа мы читаем статьи, смотрим обучающие видео, доклады и неизбежно натыкаемся на Feature‑Sliced Design (FSD).
Митап MskVue.js #13 прошел 29 мая в офисе Lamoda. Вместе с сообществом MSK VUE.JS организовали три ярких доклада, разыграли мерч за лучшие вопросы и много общались со спикерами и друг с другом. Делимся материалами со встречи.
Каждый, кто использует Vue для разработки, так или иначе встречается с необходимостью выполнить какое‑либо побочное действие при изменении значений, и сразу в голове возникает мысль о двух методах‑наблюдателях — Watch и WatchEffect.
Как работают эти 2 метода можно узнать из великолепной документации Vue, а в этой статье мы посмотрим на примеры самых часто используемых компонентов вместе с наблюдателями — по 2 компонента на каждый метод — а заодно вы сможете больше понять принцип их работы.
По ходу статьи также будут приведены некоторые полезные библиотеки Vue, которые часто используются в разработке.
Важность надежной обработки запросов в оффлайн-режиме невозможно переоценить, особенно для приложений, которые должны функционировать и в отсутствии интернет-соединения. Workbox - это мощный инструмент для управления Service Worker в браузерах, он как раз призван решать подобную задачу при помощи соответствующего плагина, но поддержка Background Sync API не универсальна. В этой статье я покажу, как расширить Workbox, чтобы Background Sync корректно работал даже на платформе iOS/Safari.
Wails - это легковесный фреймворк, предназначенный для создания кросс-платформенных GUI приложений рабочего стола на golang и стандартных веб технологиях (Svelte, React, Preact, Vue, Lit, Vanilla JS). Ближайшие аналоги это естественно Electron (JS), Tauri (Rust), хочется добавить Qt (С++), но это уже другой уровень. Сразу скажу, что Wails не идеален, имеет множество ограничений и в целом не подойдёт для чего-то крупного, Tauri к примеру более зрелый проект, больше функций, быстрее развивается, больше и живее сообщество, но это уже на rust, а это не наш стэк.
Еще в бытность джунни, я наткнулся на милейшую интерактивную обучалку по селекторам CSS: CSS Diner. Кто не знает — обязательно посмотрите, эстетический кайф гарантирован. Прошел ее минут за 15 на одном дыхании и подумал: а почему бы не сделать что‑то подобное с аналогичной механикой «допиши правильное слово в пропуск в бойлерплейте», только по другой теме? Сходу на ум ничего не пришло, но идею я запомнил.
Три года спустя я решил изучить React, написав на нем какой‑нибудь пет‑проект (имхо, лучший способ изучить новую технологию/язык). Тут‑то я и вспомнил про CSS Diner. Осталось только найти подходящую тему, где эта механика бы зашла.
Маленькая история о том, как мы делали один непростой блоговый проект, взяли на себя смелость по технической реализации связки, которую ранее никто никогда не решал на коммерческом уровне.
Web Vitals — набор метрик от Google, которые показывают, насколько быстро и стабильно загружается ваш сайт, как плавно отображается контент и насколько оперативно интерфейс реагирует на действия пользователя.
В этой статье вы найдёте пошаговую инструкцию по интеграции Web Vitals в проект, отправке метрик в Яндекс.Метрику и настройке отчётов для оперативного мониторинга. Благодаря этому вы сможете своевременно выявлять и устранять «узкие места» в работе приложения ещё до появления жалоб пользователей.
Вообще, я менеджер.
Но когда-то писал код и всегда любил это занятие. Серьезно прогал мобильные приложения, и даже заработал за один из ответов на SO больше 100 звездочек.
Но с тех пор прошла куча времени.
И последнее время меня вновь увлекла эта тема. А как она может увлечь современного человека, измученного миллиардом фреймворков и отставшего от прогресса лет на 15?
Конечно-же курсором и вайб-кодингом.
И я начал кодить.
Собрал несколько ботов, потом замахнулся на CMS. Сейчас даже делаю свою тулзу для запуска LLM-пайплайнов с импортом их из n8n.
Но в процессе всего этого неизменно сталкивался с двумя проблемами
1) Cursor (и брат его Windsurf) паршивейшим образом обходится с нетипизированными и слабо-типизированными языками. Изобретает названия переменных, меняет их по ходу, и вообще, забивает на это огромный и толстый... За пределами этого кодит он неплохо. Но данная штука лично у меня порождает 90% багов.
2)...
