Как стать автором
Обновить
28.25

VueJS *

Прогрессивный JavaScript-фреймворк

Сначала показывать
Порог рейтинга
Уровень сложности

БЭМ + Tailwind: прагматичный гибрид для современного фронтенда

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров349

Устали от бесконечных споров о CSS-методологиях? В этой статье я рассказываю, как объединил БЭМ и Tailwind в мощный гибридный подход, который спас мой проект и нервную систему. Узнайте, как избавиться от мучительного нейминга, решить проблему с отступами и ускорить разработку в два раза.

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

Чекнуть габеллу.

Новости

Магия ClientOnly: повышаем производительность и безопасность в Nuxt-приложениях

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров460

ClientOnly в Nuxt - это не просто костыль для исправления SSR-ошибок, а многофункциональный инструмент с неожиданными преимуществами. Разбираемся, как этот компонент может ускорить загрузку приложения, улучшить пользовательский опыт и даже создать дополнительный уровень защиты от ботов.

Серьёзно о несерьёзном и с юмором о технологиях — обо всех секретных суперспособностях вашего любимого компонента-невидимки.

...Loading

Vue Teleport: как работает

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров1.9K

Привет, Хабр!

Сегодня разберём один из недооценённых, но крайне полезных инструментов во Vue 3 — <Teleport>. Это встроенный механизм, который позволяет рендерить часть шаблона вне текущего DOM‑контекста. Он нужен при реализации модалок, тултипов и других компонентов, которые должны «выпрыгивать» из дерева компонентов, но при этом сохранять реактивность, фокус и доступность. Без этих костылей, z-index: 9999 и appendChild.

Читать далее

Композиционные хуки во Vue 3: коротко

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров1.4K

Привет, Хабр!

В этой статье рассмотрим, что такое композиционные хуки во Vue 3, зачем они нужны и как их использовать.

Читать далее

HTML Builder: визуальный конструктор HTML-структур на Vue 3

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров8.5K

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: Готовые компоненты для быстрой разработки интерфейсов с перетаскиванием

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров6.6K

Представляю vue-dnd-kit/components — готовые компоненты для быстрой разработки drag & drop интерфейсов в Vue 3!

📋 Сортируемые таблицы
📊 Канбан-доски
🌳 Древовидные структуры
🧩 Интерактивные дашборды

CLI работает как shadcn/ui — компоненты клонируются в ваш проект, давая полный контроль над кодом. Проект в активной разработке, но уже готов к использованию!

Готовые компоненты: Table, Kanban, Tree, Dashboard.

Статус: бета, API может изменяться. Подходит для прототипов и активной разработки.

Читать далее

Vue 3: Почему ref() — это новая ссылка, а reactive() — обёртка?

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров3.4K

Если вы работаете с Vue 3, вы точно сталкивались с ref() и reactive(). Обе функции из Composition API делают значения реактивными — но делают это по-разному. И хотя документация Vue чётко указывает, что использовать в каком случае, она редко объясняет, почему это важно и что может пойти не так, если использовать не тот инструмент.

Вот ссылки на официальную документацию — на всякий случай:

Читать далее

Почему Feature-Sliced Design (FSD) не спасет ваш проект

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров3.8K

Каждый разработчик рано или поздно сталкивается с вопросом: как организовать проект так, чтобы он не превратился в хаос? Или как исправить проект, в котором уже царит хаос?

Начинается всё одинаково: мы делаем простое MVP или проект с ограниченным функционалом, не заморачиваемся по поводу архитектуры и организации кода, ведь проект небольшой и несложный, а сделать его нужно уже здесь и сейчас. Но время идёт, и у бизнеса появляются всё новые требования. Какие‑то изначальные идеи полностью отменяются или меняются до неузнаваемости, разрастается команда, дизайн меняется несколько раз, появляется необходимость покрыть проект тестами, а иногда и необходимость вообще сменить стек технологий. И вот вы уже работаете над кодом, в котором становится всё сложнее вносить изменения в существующий функционал. Всё держится на костылях, становится трудно ориентироваться в куче файлов, и кажется, что всё устроено как‑то не так, как должно быть.

В этот момент мы начинаем задаваться вопросом: «а как нужно писать и организовывать код на самом деле?». В поисках ответа мы читаем статьи, смотрим обучающие видео, доклады и неизбежно натыкаемся на Feature‑Sliced Design (FSD).

Читать далее

Ретроспектива Vue 3, композаблы и Svelte. Материалы с митапа MskVue.js #13

Уровень сложностиСредний
Время на прочтение2 мин
Количество просмотров1.6K

Митап MskVue.js #13 прошел 29 мая в офисе Lamoda. Вместе с сообществом MSK VUE.JS организовали три ярких доклада, разыграли мерч за лучшие вопросы и много общались со спикерами и друг с другом. Делимся материалами со встречи.

Читать далее

Vue. Watch и WatchEffect на практике

Уровень сложностиПростой
Время на прочтение13 мин
Количество просмотров3.8K

Каждый, кто использует Vue для разработки, так или иначе встречается с необходимостью выполнить какое‑либо побочное действие при изменении значений, и сразу в голове возникает мысль о двух методах‑наблюдателях — Watch и WatchEffect.

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

По ходу статьи также будут приведены некоторые полезные библиотеки Vue, которые часто используются в разработке.

Читать далее

Настройка Workbox Background Sync для совместимости с iOS и Android WebView

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров283

Важность надежной обработки запросов в оффлайн-режиме невозможно переоценить, особенно для приложений, которые должны функционировать и в отсутствии интернет-соединения. Workbox - это мощный инструмент для управления Service Worker в браузерах, он как раз призван решать подобную задачу при помощи соответствующего плагина, но поддержка Background Sync API не универсальна. В этой статье я покажу, как расширить Workbox, чтобы Background Sync корректно работал даже на платформе iOS/Safari.

Читать далее

Десктопное кросс-платформенное приложение на Wails (Golang + Vue.js). Как мы делали Tuna Desktop

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров4.7K

Wails - это легковесный фреймворк, предназначенный для создания кросс-платформенных GUI приложений рабочего стола на golang и стандартных веб технологиях (Svelte, React, Preact, Vue, Lit, Vanilla JS). Ближайшие аналоги это естественно Electron (JS), Tauri (Rust), хочется добавить Qt (С++), но это уже другой уровень. Сразу скажу, что Wails не идеален, имеет множество ограничений и в целом не подойдёт для чего-то крупного, Tauri к примеру более зрелый проект, больше функций, быстрее развивается, больше и живее сообщество, но это уже на rust, а это не наш стэк.

Читать далее

Как я с помощью ChatGPT и Midjourney браузерную игру для изучения регулярных выражений создавал

Уровень сложностиПростой
Время на прочтение13 мин
Количество просмотров5.5K

Еще в бытность джунни, я наткнулся на милейшую интерактивную обучалку по селекторам CSS: CSS Diner. Кто не знает — обязательно посмотрите, эстетический кайф гарантирован. Прошел ее минут за 15 на одном дыхании и подумал: а почему бы не сделать что‑то подобное с аналогичной механикой «допиши правильное слово в пропуск в бойлерплейте», только по другой теме? Сходу на ум ничего не пришло, но идею я запомнил.

Три года спустя я решил изучить React, написав на нем какой‑нибудь пет‑проект (имхо, лучший способ изучить новую технологию/язык). Тут‑то я и вспомнил про CSS Diner. Осталось только найти подходящую тему, где эта механика бы зашла.

Читать далее

Ближайшие события

Как мы подружили WordPress, Gutenberg и Vue/Nuxt

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров1.6K

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

Читать далее

Мониторинг Web Vitals через Яндекс.Метрику: пошаговое руководство

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров685

Web Vitals — набор метрик от Google, которые показывают, насколько быстро и стабильно загружается ваш сайт, как плавно отображается контент и насколько оперативно интерфейс реагирует на действия пользователя.

В этой статье вы найдёте пошаговую инструкцию по интеграции Web Vitals в проект, отправке метрик в Яндекс.Метрику и настройке отчётов для оперативного мониторинга. Благодаря этому вы сможете своевременно выявлять и устранять «узкие места» в работе приложения ещё до появления жалоб пользователей.

Читать далее

One-shot промптинг. Как я начал вайбкодить в 10? раз быстрее

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров49K

Вообще, я менеджер.

Но когда-то писал код и всегда любил это занятие. Серьезно прогал мобильные приложения, и даже заработал за один из ответов на SO больше 100 звездочек.

Но с тех пор прошла куча времени.

И последнее время меня вновь увлекла эта тема. А как она может увлечь современного человека, измученного миллиардом фреймворков и отставшего от прогресса лет на 15?
Конечно-же курсором и вайб-кодингом.

И я начал кодить.

Собрал несколько ботов, потом замахнулся на CMS. Сейчас даже делаю свою тулзу для запуска LLM-пайплайнов с импортом их из n8n.

Но в процессе всего этого неизменно сталкивался с двумя проблемами

1) Cursor (и брат его Windsurf) паршивейшим образом обходится с нетипизированными и слабо-типизированными языками. Изобретает названия переменных, меняет их по ходу, и вообще, забивает на это огромный и толстый... За пределами этого кодит он неплохо. Но данная штука лично у меня порождает 90% багов.
2)...

Читать далее

Архитектура от тестов: Проектируем код, который легко поддерживать

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров6K

Фронтендеры, постоянно в поиске идеальной архитектуры. Слои, фича-слайсы, атомарный дизайн, фрактальность... Все эти подходы имеют право на жизнь. Но сегодня я хочу поделиться способом мышления, который сделает любой ваш код лучше, а любую архитектуру – яснее.

Читать далее

Понимая реактивные системы: асинхронные вычисления

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров3.4K

Сегодня мы продолжим разбирать базовые концепции реактивности, изложенные Райаном Карниато (Ryan Carniato), автором SolidJS. Если ранее мы затрагивали производные и их планирование, то сегодня разберём более сложную тему — асинхронность в контексте реактивного программирования. Эта концепция добавляет новый уровень сложности, поскольку требует учёта динамических процессов, выходящих за рамки синхронных операций.

Читать далее

Паттерны проектирования Composable в Vue

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров4.3K

Если вы уже освоили основы написания Composable в Vue, то следующий шаг — собрать коллекцию лучших и самых полезных паттернов, расширив свой инструментарий для решения задач. В этой статье мы рассмотрим семь различных паттернов для написания более эффективных Composable.

Читать далее

React vs Vue – подробное сравнение и перспективы

Уровень сложностиСредний
Время на прочтение46 мин
Количество просмотров19K

В этой статье мы проведём подробный анализ современных практик frontend-разработки, сравним состояние React и Vue 5 лет назад и на текущий момент, а также попробуем спрогнозировать их перспективность в обозримом будущем с учётом развития LLM моделей и AI агентов. Посмотрим их экосистемы (Next.js и Nuxt, Redux и Pinia), использование в бэкенде, популярность решений в энтерпрайзе, а так же понимание разработчиками и LLM моделями.

Читать далее
1
23 ...

Вклад авторов