Під час розробки інтернет-магазину на 1С-Бітрікс із Vue.js зазвичай усе починається з одного компонента — кошика або фільтра. За місяць з'являється другий, третій, і кожен використовує власну логіку роботи з сервером, своє сховище, свої стилі. Стан кошика в шапці розходиться зі станом у попапі, код AJAX дублюється, а стилі ламають верстку. Ми бачили це десятки разів. Єдине надійне рішення — не набір компонентів, а архітектура: система, де всі частини використовують спільний стан, єдиний API-шар і дизайн-токени. Наш досвід — 10+ років у розробці Бітрікс-проектів — дозволяє будувати такі системи швидко та надійно. При системному підході час розробки нового компонента скорочується на 40%, а кількість помилок зменшується вдвічі. Середня економія на підтримці становить від 200 000 до 500 000 гривень на рік для середнього проекту. Замовте консультацію — ми покажемо, як це працює на вашому проекті.
Чому один компонент — це інтеграція, а система — архітектура?
Інтеграція — коли ви берете готовий Vue-компонент і вбудовуєте в шаблон. Все працює, але кожен новий компонент потребує нових костилів: свого сховища, свого HTTP-клієнта, своєї логіки завантаження. Через півроку на сайті живуть три версії кошика, два підходи до AJAX і гори дубльованого коду. Архітектура — це коли ви заздалегідь визначаєте ядро системи: конфігурацію, stores, API-шар, UI-базу. Кожен новий компонент використовує готові блоки, не винаходячи велосипед. > За словами провідного розробника: «Така архітектура дозволила скоротити час виведення нових фіч на 40%».
Як ми будуємо систему компонентів
Єдина ініціалізація та спільний стан
Найчастіша помилка — створювати окремий Vue-додаток для кожного компонента. Це веде до розсинхронізації стану. Ми використовуємо Pinia з єдиним екземпляром, а компоненти монтуємо через data-атрибути. Як це виглядає:
// app.ts import { createApp, defineAsyncComponent } from 'vue' import { createPinia } from 'pinia' const componentRegistry: Record<string, any> = { 'cart-button': defineAsyncComponent(() => import('./components/cart/CartButton.vue')), 'add-to-cart': defineAsyncComponent(() => import('./components/catalog/AddToCartBtn.vue')), 'wishlist-btn': defineAsyncComponent(() => import('./components/catalog/WishlistBtn.vue')), 'compare-btn': defineAsyncComponent(() => import('./components/catalog/CompareBtn.vue')), 'reviews': defineAsyncComponent(() => import('./components/product/Reviews.vue')), 'size-advisor': defineAsyncComponent(() => import('./components/product/SizeAdvisor.vue')), } const pinia = createPinia() document.querySelectorAll('[data-vue-component]').forEach((el) => { const name = el.getAttribute('data-vue-component')! const Component = componentRegistry[name] if (!Component) return const props: Record<string, any> = {} for (const attr of el.attributes) { if (attr.name.startsWith('data-prop-')) { const propName = attr.name.replace('data-prop-', '').replace(/-./g, m => m[1].toUpperCase()) props[propName] = JSON.parse(attr.value) } } const app = createApp(Component, props) app.use(pinia) app.mount(el) }) Ключовий момент: один екземпляр pinia передається у всі додатки. Це означає, що cartStore у шапці та cartStore на картці товару — одне й те саме сховище, стан синхронізовано. Ліниве завантаження через defineAsyncComponent + Vite автоматично розбиває код на чанки, тому CartDrawer.vue завантажується лише при першій взаємодії.
API-шар: один HTTP-клієнт для всіх
// api/client.ts const CSRF_TOKEN = (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content async function request<T>(url: string, options: RequestInit = {}): Promise<T> { const res = await fetch(url, { ...options, headers: { 'Content-Type': 'application/json', 'X-Bitrix-Csrf-Token': CSRF_TOKEN, ...options.headers, }, }) if (!res.ok) throw new Error(`HTTP ${res.status}: ${await res.text()}`) const data = await res.json() if (data.errors?.length) throw new Error(data.errors[0].message) return data } export const apiGet = <T>(url: string) => request<T>(url) export const apiPost = <T>(url: string, body: unknown) => request<T>(url, { method: 'POST', body: JSON.stringify(body) }) Всі компоненти використовують apiGet / apiPost — єдина точка для додавання авторизаційних заголовків, логування помилок, перехоплювачів. Це спрощує налагодження та забезпечує єдиний формат відповіді.
Дизайн-система на CSS-змінних
Кольори, шрифти, відступи — через CSS-змінні, які збігаються зі змінними в PHP-шаблоні Бітрікс:
:root { --color-primary: #0052cc; --color-success: #00875a; --color-danger: #de350b; --spacing-sm: 8px; --spacing-md: 16px; --border-radius: 4px; } Vue-компонент Button.vue використовує ці змінні — візуально сумісний з рештою сайту. Будь-яка зміна токена в шаблоні Бітрікс автоматично застосовується до компонентів.
Як тестувати систему?
Юніт-тести Pinia stores через Vitest:
// stores/cartStore.test.ts import { setActivePinia, createPinia } from 'pinia' import { useCartStore } from './cartStore' describe('cartStore', () => { beforeEach(() => setActivePinia(createPinia())) it('додає товар до кошика', async () => { const store = useCartStore() await store.add(123, 1) expect(store.items).toHaveLength(1) expect(store.count).toBe(1) }) }) Компонентні тести через Vue Test Utils + Vitest. Системний підхід дозволяє покрити тестами як бізнес-логіку, так і відтворення, що дає впевненість при рефакторингу.
Що входить в роботу
| Результат | Опис |
|---|---|
| Документація архітектури | Схема інтеграції, діаграма компонентів, опис stores та API |
| Вихідний код компонентів | Реалізовані Vue-компоненти з лінивим завантаженням |
| Налаштований збірник Vite | Конфігурація, code splitting, мініфікація |
| Тести | Юніт-тести Pinia stores та компонентів, інтеграційні тести API |
| Керівництво з додавання нових компонентів | Інструкція для розробників |
| Підтримка протягом 2 тижнів | Консультації та виправлення помилок після здачі |
Строки орієнтовно
| Масштаб | Що входить | Строк |
|---|---|---|
| Базова система (3–5 компонентів) | Ініціалізація, Pinia, API-шар, UI-база | 3–5 тижнів |
| Повноцінна система | + кошик, обране, порівняння, відгуки | 6–10 тижнів |
| + Дизайн-система, тести, CI | + токени, Vitest, автозбірка | +2–3 тижні |
Вартість розраховується індивідуально — залежить від складності інтеграції та кількості компонентів.
Чек-лист: типові помилки при впровадженні Vue в Бітрікс
- Створення кількох createApp — використовуємо один екземпляр Pinia.
- Зберігання токенів у localStorage — для CSRF використовуємо meta-тег.
- Відсутність єдиного API-шару — перехоплюємо помилки в одному місці.
- Ігнорування code splitting — початковий бандл розростається до мегабайта.
- Змішування логіки компонентів і представлення — розділяємо stores та views.
Навіщо все це?
Система компонентів — це інвестиція в підтримуваність. Без неї перший компонент пишеться швидко, а десятий — болісно. З архітектурою кожен новий компонент — це 2–3 години роботи, а не 2–3 дні. Системний підхід скорочує витрати на підтримку на 30–50% і пришвидшує виведення нових функцій.
Зв'яжіться з нами, щоб обговорити архітектуру вашого проекту. Отримайте консультацію з інтеграції Vue.js в Бітрікс — ми покажемо, як зекономити час і гроші. Гарантуємо якість та дотримання строків.