Архітектура Vue-компонентів для 1С-Бітрікс: інтеграція та тести

Під час розробки інтернет-магазину на 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. Системний підхід дозволяє покрити тестами як бізнес-логіку, так і відтворення, що дає впевненість при рефакторингу.

Що входить в роботу

Строки орієнтовно

Вартість розраховується індивідуально — залежить від складності інтеграції та кількості компонентів.

Чек-лист: типові помилки при впровадженні Vue в Бітрікс

• Створення кількох createApp — використовуємо один екземпляр Pinia.
• Зберігання токенів у localStorage — для CSRF використовуємо meta-тег.
• Відсутність єдиного API-шару — перехоплюємо помилки в одному місці.
• Ігнорування code splitting — початковий бандл розростається до мегабайта.
• Змішування логіки компонентів і представлення — розділяємо stores та views.

Навіщо все це?

Система компонентів — це інвестиція в підтримуваність. Без неї перший компонент пишеться швидко, а десятий — болісно. З архітектурою кожен новий компонент — це 2–3 години роботи, а не 2–3 дні. Системний підхід скорочує витрати на підтримку на 30–50% і пришвидшує виведення нових функцій.

Зв'яжіться з нами, щоб обговорити архітектуру вашого проекту. Отримайте консультацію з інтеграції Vue.js в Бітрікс — ми покажемо, як зекономити час і гроші. Гарантуємо якість та дотримання строків.

Vue.js