Розробка Vue.js-додатки для 1С-Бітрікс

Розробка Vue.js-застосунку для 1С-Бітрікс

Питання «як інтегрувати Vue у Бітрікс» виникає тоді, коли стандартні компоненти на jQuery та серверному рендерингу перестають справлятися з інтерактивністю. Бітрікс не надає готового механізму для Vue, але платформа достатньо гнучка, щоб Vue-застосунок працював органічно — через REST API або кастомні AJAX-обробники.

Архітектурні варіанти

Віджет на сторінці — Vue-застосунок монтується до конкретного DOM-елемента всередині Бітрікс-сторінки. Решта сайту працює як зазвичай. Підходить для ізольованих інтерактивних блоків: калькулятори, конфігуратори, форми з логікою.

SPA з Бітрікс як бекендом — Vue-застосунок займає всю сторінку, дані отримує через REST API або /bitrix/services/main/ajax.php. Шаблон Бітрікс рендерить мінімальний HTML з точкою монтування та передає початкові дані через window.__INITIAL_STATE__.

Гібридний варіант — Bitrix рендерить серверну частину, Vue керує інтерактивними блоками. Актуально за необхідності SEO-індексації контенту без SSR.

Передача даних з Бітрікс у Vue

Сервер передає початкові дані в шаблоні компонента:

// У шаблоні Бітрікс (.php)
$APPLICATION->addHeadScript(
    '<script>window.__BITRIX_STATE__ = ' . json_encode([
        'userId' => $USER->GetID(),
        'catalogId' => $arResult['IBLOCK_ID'],
        'currency' => CCurrency::GetByID('RUB'),
    ]) . ';</script>'
);

У Vue-застосунку:

const state = window.__BITRIX_STATE__ || {}

Це дозволяє уникнути зайвого AJAX-запиту при першому завантаженні.

Збірка та підключення

Vite або Webpack — для Бітрікс зручніший Vite завдяки швидкості та простоті конфігурації:

// vite.config.js
export default {
  build: {
    outDir: 'local/templates/main/vue-dist',
    rollupOptions: {
      input: { app: 'src/main.js' }
    }
  }
}

Скомпільований бандл підключається в шаблоні Бітрікс через $APPLICATION->AddHeadScript() або Asset::getInstance()->addJs(). Не використовуйте <script> безпосередньо в шаблоні — Бітрікс може переставити порядок підключення скриптів.

REST API Бітрікс для Vue

Битрікс REST API (модуль rest) — стандартний шлях для запитів з Vue. Ключові методи для інтернет-магазину:

• catalog.product.list — список товарів
• sale.order.add — створення замовлення
• crm.contact.add — додавання контакту в CRM

Для нестандартних операцій — кастомні методи через \Bitrix\Rest\RestManager::addMethod() або AJAX-обробники на /bitrix/services/main/ajax.php з \Bitrix\Main\Engine\Controller.

Приклад із практики

Дилерський портал: каталог запчастин з фільтрацією за 15 параметрами. Стандартний компонент catalog.section з AJAX-фільтром гальмував при 50 000+ позиціях — кожна зміна фільтра викликала повний серверний рендеринг. Рішення: заміна на Vue-застосунок з debounced-запитами до кастомного REST-методу, що повертає JSON. Серверний рендеринг залишили лише для першого завантаження з SEO-контентом. Час реакції фільтра скоротився з 2–3 секунд до 300–500 мс.

Управління станом

Для простих віджетів — reactive() Vue 3 або ref(). Для SPA з авторизацією, кошиком, особистим кабінетом — Pinia (офіційна заміна Vuex для Vue 3). Vuex актуальний лише якщо проєкт вже на Vue 2.

Терміни виконання

Терміни залежать від наявності готового REST API та складності бізнес-логіки.