Інтеграція Vue.js з шаблоном сайту 1С-Бітрікс
Головна складність інтеграції Vue в шаблон Бітрікс — конфлікт між глобальним станом jQuery-плагінів, які Бітрікс використовує повсюдно, та реактивністю Vue. Також важливий порядок завантаження скриптів, яким Бітрікс керує через власний менеджер ресурсів.
Підключення Vue до шаблону без конфліктів
У header.php шаблону Бітрікс додайте Vue як модуль через asset-менеджер:
\Bitrix\Main\Page\Asset::getInstance()->addJs('/local/templates/main/vue-dist/app.js', true);
Прапор true — скрипт переміщується в кінець <body>, це важливо для Vue, якому потрібен DOM.
Альтернатива — BX.ready(), обгортка Бітрікс над DOMContentLoaded:
BX.ready(function() {
const { createApp } = Vue;
createApp(App).mount('#vue-app');
});
Точки монтування в шаблоні
У шаблоні Бітрікс (.php-файли) розставте div-контейнери для Vue-віджетів:
// У шаблоні header.php або в потрібному місці сторінки
<div id="vue-search-widget" data-catalog-id="<?= $catalogId ?>"></div>
Vue-застосунок зчитує атрибути через el.dataset:
const el = document.getElementById('vue-search-widget');
const catalogId = el.dataset.catalogId;
createApp(SearchWidget, { catalogId }).mount(el);
Передача CSRF-токена
Бітрікс генерує CSRF-токен для захисту форм. При AJAX-запитах з Vue його необхідно передавати:
// Отримання токена з cookie (Бітрікс зберігає в bitrix_sessid)
function getBitrixToken() {
return document.querySelector('input[name="sessid"]')?.value
|| BX.bitrix_sessid?.();
}
// В axios-конфігу:
axios.defaults.headers.common['X-Bitrix-Csrf-Token'] = getBitrixToken();
Конфлікт з jQuery та BX.UI
Бітрікс використовує window.BX — власний namespace з утилітами, та jQuery. Vue безпосередньо з ними не конфліктує, але:
- Не використовуйте jQuery для маніпуляції DOM всередині Vue-компонентів — Vue втрачає реактивність
-
BX.UI.Dialog,BX.PopupWindow— можна викликати з Vue черезonMounted/події, але не з шаблону
Приклад із практики
Корпоративний сайт на Бітрікс: додали Vue-віджет підбору продукту в шаблон. Віджет працював, але після відкриття модального вікна Бітрікс (BX.PopupWindow) реактивність Vue ламалась — popup клонував DOM-елемент точки монтування. Рішення: монтування Vue-віджета в document.body через teleport, а не всередину елемента, який міг бути клонований.
Терміни виконання
Інтеграція Vue в існуючий шаблон з одним-двома віджетами — від 4 до 8 годин.