Интеграция 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 часов.