UI-kit на Vue.js для 1С-Бітрікс: розробка та впровадження під ключ

Коли на Бітрікс-проєкті працює команда з 5+ розробників, а каталог налічує десятки тисяч товарів, інтерфейс починає нагадувати клаптикову ковдру: кнопки в різних шаблонах виглядають по-різному, модальні вікна реалізовані трьома способами, а сповіщення — чотирма?

Кожен новий компонент пишеться з нуля, тому що загального стандарту немає. Ми накопичили досвід вирішення цієї проблеми в десятках проєктів — і знаємо, що UI-kit на Vue.js з єдиним API та документацією усуває хаос.

Розробка UI-kit під ключ дозволяє скоротити час на створення нових фіч, покращити консистентність інтерфейсу та спростити онбординг нових розробників. Нижче — як ми проєктуємо та розробляємо UI-kit на Vue.js для проєктів 1С-Бітрікс, з реальним кейсом та етапами роботи.

Що таке UI-kit і навіщо він потрібен у Бітрікс-проєкті

UI-kit — це бібліотека перевикористовуваних Vue-компонентів з єдиною візуальною мовою. До неї входять базові елементи: кнопки, поля введення, модальні вікна, сповіщення, іконки, типографіка. Кожен компонент інкапсулює верстку, стилі та поведінку. У контексті 1С-Бітрікс це особливо важливо, тому що кожен шаблон компонента може писатися різними розробниками, і без UI-kit узгодженість втрачається.

Архітектура бібліотеки

Структура типового UI-kit:

/local/js/ui-kit/ ├── src/ │ ├── components/ │ │ ├── UiButton.vue │ │ ├── UiInput.vue │ │ ├── UiModal.vue │ │ ├── UiToast.vue │ │ └── ... │ ├── composables/ │ │ ├── useModal.js │ │ └── useToast.js │ ├── tokens/ │ │ └── design-tokens.css │ └── index.js ├── dist/ └── vite.config.js 

Бібліотека збирається через Vite у форматі UMD:

// vite.config.js export default { build: { lib: { entry: './src/index.js', name: 'BitrixUIKit', formats: ['umd'], fileName: 'ui-kit', }, rollupOptions: { external: ['vue'], output: { globals: { vue: 'Vue' } } } } } 

Дизайн-токени та CSS-змінні

Усі кольори, відступи, радіуси та тіні зберігаються як CSS-змінні. Компоненти використовують токени, а не хардкод. Це дозволяє змінювати тему без зміни компонентів:

:root { --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --radius-button: 6px; --shadow-modal: 0 20px 60px rgba(0,0,0,.2); } 

Типовий набір компонентів для e-commerce:

Які етапи включає розробка UI-kit?

Ось покрокова інструкція для інтеграції UI-kit у проєкт:

1. Проведіть аудит існуючого UI — інвентаризація всіх елементів, виявлення дублів.
2. Спроєктуйте дизайн-систему — зафіксуйте токени, склад компонентів, їх варіанти та стани.
3. Розробіть компоненти на Vue 3 з Composition API, типізація props, інкапсуляція логіки.
4. Налаштуйте збірку через Vite в UMD-формат із зовнішньою залежністю Vue.
5. Інтегруйте бібліотеку в шаблон Бітрікса за допомогою AddHeadScript і монтуйте в потрібних точках.

Інтеграція з шаблоном:

use Bitrix\Main\Page\Asset; $asset = Asset::getInstance(); $asset->addJs('/local/js/ui-kit/dist/ui-kit.umd.js'); $asset->addCss('/local/js/ui-kit/dist/ui-kit.css'); 

Як зазначено в документації Vue.js, компоненти — це перевикористовувані екземпляри, і UI-kit реалізує цей принцип на практиці.

Чому варто інвестувати в UI-kit?

UI-kit вирішує три ключові проблеми. Перша — швидкість розробки: новий шаблон збирається з готових компонентів, а не пишеться з нуля. Друга — консистентність: користувач бачить однакові кнопки та форми на всьому сайті, що підвищує довіру. Третя — легкий онбординг: новий розробник знайомиться з бібліотекою компонентів за пару днів, а не розбирається в 12 варіантах однієї кнопки. Наш досвід показує: після впровадження UI-kit час створення нового функціоналу скорочується на 30–50%, а кількість багів, пов'язаних з інтерфейсом, падає практично до нуля. Бібліотека супроводжується документацією (мінімум README, у великих проєктах — Storybook) і підтримується в актуальному стані. За рахунок перевикористання компонентів вартість розробки нового функціонального блоку знижується вдвічі.

Кейс: UI-kit для великого інтернет-магазину з нашої практики

Клієнт — рітейлер побутової техніки з каталогом 25 000 SKU. Команда: 4 фронтенд-розробники. Проблема: за довгий час сайт розроблявся різними командами, в CSS накопичилося 8 варіантів кнопки, 3 реалізації модальних вікон (jQuery, Bootstrap, кастомна), 2 варіанти нотифікацій.

Перший етап — аудит: зібрали всі унікальні UI-елементи з усього сайту. Отримали 47 типів елементів, які потрібно уніфікувати. Другий етап — проєктування: спільно з дизайнером зафіксували дизайн-систему (токени, 24 компоненти, їх варіанти та стани). Третій етап — розробка: написали бібліотеку на Vue 3 з Composition API, включили UiButton, UiInput, UiModal, UiToast, UiPagination, UiDropdown, UiLoader та інші. Четвертий етап — міграція: замінили старі реалізації на компоненти kit, починаючи з нових шаблонів і найбрудніших старих.

Результат: швидкість розробки зросла вдвічі, дизайн-рев'ю скоротився з 2 годин до 30 хвилин, усі нові фічі одразу вписуються в єдину дизайн-систему. Термін впровадження — 6 тижнів. Vue.js компоненти розробляються в 2 рази швидше, ніж аналоги на jQuery — різниця в швидкості особливо помітна на складних кастомних елементах.

Як ми працюємо: процес і терміни

Повний цикл для базового UI-kit (15–20 компонентів) — 6–10 тижнів. Для великого проєкту з 30–50 компонентами та Storybook — 8–14 тижнів.

Гарантії та досвід

Ми розробляємо на 1С-Бітрікс та Vue.js більше 10 років. Сертифіковані спеціалісти, десятки успішних впроваджень UI-kit для рітейлу, сервісів та корпоративних порталів. Надаємо гарантію на компоненти 6 місяців. Замовте розробку UI-kit для вашого проєкту — отримайте консультацію щодо термінів та вартості. Зв'яжіться з нами для оцінки вашого проєкту — ми підготуємо пропозицію з розробки UI-kit під ключ.

Корисні ресурси: Vue.js.