Vueland — разработка frontend-платформы для создания интерфейсов на Vue 3

Создать собственную frontend-платформу для разработки веб-интерфейсов на Vue 3, которая объединяет готовые компоненты, управление оформлением и инструменты адаптивной вёрстки. Vueland — внутренний технологический проект KVAZAR с открытым исходным кодом.

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

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

Мы разработали Vueland как модульную платформу, в которой компоненты, стили и настройки работают совместно. Основу составили Vue 3 и TypeScript. UI-компоненты и общую логику объединили в пакет @vueland/ui, а генератор утилитарных CSS-классов вынесли в отдельный пакет @vueland/utils-jit для интеграции с Vite.

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

Разработали 29 компонентов, охватывающих основные задачи построения интерфейсов: кнопки, карточки, поля ввода, формы, списки, автодополнение, выбор даты, диалоговые окна, подсказки и индикаторы загрузки. Повторяющиеся механизмы вынесли в общие composables, директивы и инфраструктурные компоненты. Для меню и списков предусмотрели централизованное управление клавиатурной навигацией через CKeyboardProvider.

Для управления оформлением реализовали темы на CSS-переменных и систему визуальных пресетов. Темы описываются объектами и могут переключаться во время работы приложения. Пресеты позволяют задавать повторно используемые правила оформления компонентов из одного места. Такой подход помогает поддерживать согласованный внешний вид интерфейса и адаптировать его под фирменный стиль продукта.

Отдельной частью работы стал собственный JIT-движок утилитарных стилей. Он генерирует CSS по используемым классам, поддерживает произвольные значения и адаптивные модификаторы. Настройки контрольных точек экрана объединили в одну конфигурацию для сетки, утилитарных классов и программного определения размера экрана. Это позволяет согласовать адаптивное поведение компонентов и вёрстки.

Подготовили документацию с инструкциями по подключению, описанием настроек, API компонентов и примерами использования. Исходный код платформы открыт на GitHub под лицензией MIT. Vueland продолжает развиваться: в документации готовые к использованию в продакшне компоненты отмечаются статусом Stable, а API и состав платформы уточняются по мере разработки.

Разработали Vueland — открытую frontend-платформу для Vue 3, объединяющую 29 UI-компонентов, систему тем и визуальных пресетов, адаптивную сетку и собственный JIT-движок генерации CSS. Исходный код доступен на GitHub под лицензией MIT, возможности платформы описаны в документации с примерами использования.

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

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

Для КВАЗАР результатом стала собственная расширяемая технологическая база для разработки интерфейсов. Публичный репозиторий позволяет ознакомиться с архитектурой и реализацией проекта, а открытая лицензия — использовать и дорабатывать его в других продуктах. Развитие Vueland продолжается: расширяется функциональность и уточняются API компонентов.