Обновить
64K+

VueJS *

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

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

Как опубликовать сайт на хостинг за три команды: от статики до Node.js

Время на прочтение7 мин
Охват и читатели5.4K

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

И встает вопрос: как вообще выложить это все в интернет, желательно по нормальной ссылке, с HTTPS и без тонны настроек VPS и nginx?

В этой статье я покажу способ, как публиковать сайты на PaaS-сервисах, просто привязав к ним Git-репозиторий и делая в него коммиты (или вообще просто перетягивая файлы в интерфейсе).

Читать далее

Новости

Как правильно реализовать кнопку «Назад» во Vue: просто о сложном

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

Сегодня разберём тему, которая кажется элементарной, но на практике вызывает кучу вопросов. Речь о кнопке «Назад» в приложении на Vue.

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

Читать далее

Отказались от идеального решения, чтобы всё начало работать: мы сделали игровую платформу без опыта в разработке

Уровень сложностиПростой
Время на прочтение12 мин
Охват и читатели6.4K

Отказались от идеального решения, чтобы всё начало работать: мы сделали игровую платформу без опыта в разработке

Привет! Я Алина Бриленкова, руководитель онлайн-направления в ивент-агентстве NIGHT STREET. В 2022 году я взялась делать игровую платформу для онлайн-тимбилдингов, марафонов и конкурсов без опыта в IT. Думала, что разработка — это спринт: сделал и выдохнул. Оказалось, что это миф, и на самом деле этот процесс вообще не заканчивается.

Довольно быстро стало понятно, что продукт собирается не из того, что ты сделал, а из того, от чего ты отказался. Хотелось создать продукт для ивент-индустрии с идеальной архитектурой с микросервисами, но мы решилипойти простым путём и не ошиблись. 

В этой статье — о проблемах Телеграм-ботов как систем управления участниками, решениях, от которых пришлось отказаться на первых этапах разработки и о том, как на практике происходит создание продукта с нуля, если ты заходишь в разработку не из IT. Будет полезно тем, кто сам через это проходит. Остальным — статья может понравиться как формат «под похрустеть попкорном».

Читать далее

Палитра команд: VSCode был прав — это удобно

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

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

Читать далее

Vue + БЭМ: почему это всё ещё работает

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

Методологию БЭМ придумали в Яндексе больше десяти лет назад. За это время фронтенд сильно изменился: появились компоненты, фреймворки, утилитарные классы и прочее. Казалось бы, БЭМ должен был уйти в архив. Но нет - он до сих пор спасает проекты от CSS-хаоса. Особенно когда речь заходит о Vue.

Читать далее

FiT календарь тренировок — финал трилогии пет-проекта

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

Год назад я опубликовал первую статью про разработку приложения календаря тренировок. Спустя 5 месяцев опубликовал рассказ о 10 обновлениях. Сейчас время финала истории - ещё 7 обновлений за 7 месяцев.

Сам регулярно пользуюсь приложением - оно добавляет мотивации заниматься спортом дальше, сохраняет график тренировок, следит за объемом выполненных упражнений. На текущий момент в приложении больше 150 зарегистрированных пользователей.

Времени на пет-проект уделял крайне мало, но основная функциональность была уже готова ранее. Сейчас на нём можно пробовать что-то новое - получается хороший полигон для испытаний.

Исходный код

Приложение в RuStore

Веб-версия

Frontend: Typescript, Vitest, Vite, Vue, Tanstack Query, Vue I18n, Tauri

Backend: Typescript, Vitest, Esbuild, Fastify, Mongoose, MongoDB, Swagger

Читать далее

Как мы оптимизировали компоненты во фронтенде: работа с версиями и оптимизация процессов

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели5.5K

Привет, Хабр! Меня зовут Василий Беляев. Я руководитель группы разработки по направлению фронтенда в ИТ-компании «Криптонит». В этой статье я расскажу про организацию работы с версиями и компонентами, оптимизацию рабочего процесса внутри команды, а также опишу несколько лайфхаков, которые мы применили.

Читать далее

Идеальный Store в Pinia (Vue)

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

Если спустя время у вас происходило такое, что компонент-стор разрастался, а каждое добавление или исправление логики уже пугало, то эта статья для вас.

Сегодня я не буду читать лекций. Просто поделюсь тем, как сам дошел до более-менее устойчивого подхода после того, как неоднократно рефакторил чужие сторы и ловил себя на мысли: «Зачем я это трогал?». Возможно, где-то я буду неправ, возможно, в вашем проекте это не взлетит. Я не напрашиваюсь в учителя, просто фиксирую опыт, чтобы не наступать на одни и те же грабли.

Читать далее

Как правильно называть маршруты в Vue Router: два простых правила, которые спасут ваш проект

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

Как правильно называть маршруты в Vue Router: два простых правила, которые спасут ваш проект:

1. Первое правило: всегда задавайте name

2. Второе правило: храните имена в enum (или константном объекте)

Читать далее

Как же устал это слышать: «React для создания сложных приложений, а Vue так уж…»

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

На дворе 2026-й, и за это время как React, так и Vue сделали гигантский скачок в развитии и создании экосистемы вокруг себя. Но статистика до сих пор беспощадна к Vue. На React в два раза больше вакансий, чем на Vue. Сколько я ни спрашивал React-инженеров, ответ был всегда один и тот же: «React для серьезных проектов, а Vue так уж».. Серьезно? Почему вы до сих пор так думаете?? Ну хоть один пример приведите, что нельзя сделать во Vue. Хотя бы потратьте 1 день на изучение экосистемы Vue 3 Composition API, Vue Router, Pinia - да вы после этого забудете про свой React. А про различные useState я вообще молчу, Vue тут вообще вас всех обошел с обычными ref. Это вы еще не слышали про keep-alive.

Я считаю, что такое мнение построилось из-за простой причины: люди просто поставили свою карьеру на React, вот почему они его защищают, а компании продолжают его использовать.

Читать далее

Как настроить Server Side Rendering для индексации SPA приложений поисковиками

Уровень сложностиПростой
Время на прочтение10 мин
Охват и читатели6.3K

Yandexbot заходит на ваш SPA сайт, получает пустой <div id="root"></div> и уходит. Именно так выглядит индексация большинства одностраничных приложений без SSR. Страницы не попадают в выдачу, органический трафик стоит на нуле, а команда недоумевает: сайт же работает.

Проблема не в качестве кода, а в архитектуре рендеринга. Поисковые роботы медленно или вообще не выполняют JavaScript, а значит, видят страницу до того, как ваш React или Vue успел что-то нарисовать. Настройка Server Side Rendering для индексации SPA приложений поисковиками решает эту проблему: HTML приходит уже готовым прямо с сервера.

Привет! Я Пётр Гришечкин, эксперт в области SEO для e-commerce. Последние 15 лет я проектирую системы кратного роста трафика для крупнейших сайтов. И последнее время пишу всякие околоSEO статьи – https://t.me/seo_and_sem

Это статья написано для начинающих frontend и backend разработчиков, которые хотят разобраться с технической SEO-оптимизацией. Здесь будут конкретные команды, примеры кода для React/Next.js, Vue/Nuxt.js и Angular, а также чек-лист внедрения.

Читать далее

Тестирование Vue-приложений изнутри: props, Pinia и Network без proxy и dev-сборки

Уровень сложностиСредний
Время на прочтение8 мин
Охват и читатели8.6K

Проблема не в том, что инструментов мало. Проблема в том, что большинство из них построены вокруг браузера прошлого поколения, тогда как frontend уже давно живёт внутри runtime. Именно из этой практической боли появился собственный runtime-инспектор — сначала как консольный скрипт для одной конкретной задачи, а затем как полноценный инструмент, который неожиданно нашел отклик у QA и разработчиков.

Читать далее

Vue.js Amsterdam 2026: будущее экосистемы Vite

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

Недавно в Амстердаме прошла конференция Vue.js Amsterdam 2026 — ежегодное мероприятие, посвящённое экосистеме Vite и современным инструментам фронтенд-разработки.

В этом году программа оказалась особенно насыщенной. Команда экосистемы показала сразу несколько направлений развития: обновления ключевых инструментов, новые эксперименты в архитектуре фронтенд-фреймворков и попытку собрать полноценную платформу разработки вокруг Vite.

В этой статье разберём основные анонсы конференции: Vite 8, Vite+, Void Cloud, а также обновления Vue и Nuxt.

Читать далее

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

UUI: Универсальная Пользовательская Дизайн-система для web

Уровень сложностиСредний
Время на прочтение21 мин
Охват и читатели7.5K

Как вырваться из замкнутого круга навязываемых акулами BigTech сомнительных технологий на простор устойчивого развития? Как сделать так, чтобы код внедряемой сейчас Дизайн‑системы — через пару лет опять не превратился в очередную, никому не нужную и максимально не удобную, «тыкву‑легаси»? Как выйти из дурного холивара с модными фреймворками на фронтенде и сделать библиотеку переиспользуемых компонент подходящую сразу для всех технологий и «на века»?)))

Ваша команда работает с большим количеством различных недокументированных проектов, основанном на одном визуальном языке? У вашей корпорации есть строгий брендбук и огромное количество клиентских веб‑сервисов написанных на разных фреймворках, которые по факту выглядят немного по‑разному в «одних и тех же мелочах»? Ваши фронты «пишут каждый свой фреймворк для дизайна заново каждый раз на каждом проекте»? Знакомо? UUI спешит к вам на помощь!

Мода на технологии все стремительней меняется, а браузер и простой интерфейс в нем остается. Вышел новый модный фреймворк и заказчику хочется проект именно на нем? Да пожалуйста! Легко! Так мы становимся максимально независимы от капризной и накаченной лоббированием индустрии реализуя основную задачу. Поставляя единый гайдлайн повсюду.

Читать далее

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

Уровень сложностиПростой
Время на прочтение11 мин
Охват и читатели6.5K

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

Предыдущая часть: Enovia умерла, да здравствует JMatrixPlatform: пересобираю легендарную платформу на Java и Vue

Начинаю короткий цикл с мини-историями разработки JMatrixPlatform. Информации очень много, но я начну с задачи взаимодействия технических специалистов с самой системой и её данными.

Читать далее

Делаем админку из подручных средств

Уровень сложностиПростой
Время на прочтение16 мин
Охват и читатели6.1K

Рано или поздно почти любой бэкенд-проект приходит к задаче: нужна простая внутренняя страница. Посмотреть список чего-то, нажать пару кнопок, может быть что-то удалить.На «внутренней» странице пользователей не будет, а значит – «и так сойдёт». И вот тут начинается выбор: какие технологии взять или какой стек выбрать?
Привет! На связи Евгений Захаров — backend разработчик в компании ecom.tech. Моя команда занимается вопросами координации и планирования работы внештатных сотрудников. В этой статье мой опыт, накопившейся за многие года работы в разных компаниях, дальше мы разберём базовые сценарии, риски, сложности. Поехали!

Читать далее

Что нового в Nuxt? Обзор новых версий

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели7.7K

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

Меня зовут Иван и я занимаюсь frontend-разработкой в компании SimbirSoft. В марте 2026 на официальном сайте Nuxt объявили о выходе новой версии Nuxt v4.4. В ней произведена миграция на Vue Router v5, добавлена возможность создания пользовательских фабрик useFetch/useAsyncData, типизация пропсов в Layout, новый композабл и компоненты для работы с доступностью, профилирование сборки, улучшение производительности и многое другое.

Также в январе вместе с выходом версии Nuxt v4.3 разработчики продлили поддержку Nuxt 3 до 31 июля 2026 года (ранее указывали срок до 31 января 2026 года). Решение было принято после открытия обсуждения, чтобы узнать у сообщества, как прошло обновление с версии 3 до версии 4. Многие отметили, что ждут новостей о сроках релиза Nuxt 5, который должен выйти вместе с Nitro 3, поэтому пока не спешат обновляться на четвертую версию. А пока мы ждем новостей, давайте посмотрим, какие интересные нововведения появились в последних релизах Nuxt. Данная статья — это краткий обзор на новые фичи и изменения, которые мне показались интересными.

Жми, чтобы узнать про новые фичи Nuxt🔥

ООП для управления состоянием во Vue

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

Чувак, уже есть Pinia, Pinia Colada, TanStack Query для Vue, зачем ещё один способ управлять состоянием во Vue?

Меня просто задолбало писать везде флаги отслеживания состояния для действий и делать store через фабричную функцию, как это делали наши праотцы в начале 2000-х. Запоминать зоопарк из разных composable-функций и хуков. Изучать какую-то другую систему реактивности, типа MobX, тоже не хочу. Это какой-то зашквар.

Я хочу использовать то, что есть: реактивность Vue везде, классы, методы. Хочу использовать классические шаблоны: SOLID, DDD и т.п. Хочу, чтобы Действие или запрос сами отслеживали и сообщали своё состояние. Хочу сконцентрироваться на бизнес-логике и писать меньше шаблонного кода.

И это возможно, покажу, как это работает на примере.

Погнали, если интересно

Reactive Route — новый роутер для разных фреймворков и реактивных систем в 2 КБ

Время на прочтение5 мин
Охват и читатели9.9K

Я не OpenSource разработчик, но за пару десятков лет написал под сотню enterprise-level библиотек, которые остаются в рабочем контуре, дорабатываются под каждый проект и адаптируются к новым технологиям. Большого смысла выходить в OSS не было, кроме как для упрощения обучения коллег и единого места хранения документации.

Но и желание помогать другим и делиться выстраданными подходами, экспертизой и конкретным кодом мне не чуждо - сегодня поможешь ты, завтра - тебе. Через полгода подготовки и адаптации к OpenSource (сам использую и дорабатываю около 8 лет) в свет выходит одна из библиотек моего рабочего контура - Reactive Route.

Так как я работаю с проектами на разных стеках, стараюсь писать код максимально framework-agnostic - независимыми слоями, которые можно заменить или переписать, не трогая остальной код проекта. А к фреймворкам и библиотекам для работы с состоянием они подключаются с помощью легковесных адаптеров, сохраняя синтаксис работы. Конкретно для Reactive Route выложил набор готовых адаптеров в комбинациях, которые сейчас чаще всего использую:

React + MobX / Observable

Preact (no compat) + MobX / Observable

Solid.js + нативная реактивность / MobX / Observable

Vue + нативная реактивность

В одном npm-пакете - строгая TS-типизация, SSR / MPA / no-JS / Widget режимы и тщательно протестированная отказоустойчивость. В статье не буду пересказывать документацию на русском и английском, а поговорю скорее про общие принципы качества, использование ИИ в разработке и почему многие библиотеки раздуваются, не успев даже стабилизировать ядро.

Читать

Когда фронтенд перестаёт быть игрушкой: пишем собственный реактивный движок на JavaScript

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

Почти каждый фронтенд-разработчик однажды задаётся вопросом: что на самом деле происходит внутри современных фреймворков. Почему изменение переменной автоматически обновляет интерфейс? Как библиотека понимает, что именно нужно перерисовать?

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