Інтеграція Vue.js з 1С-Бітрікс: віджети, SPA, гібридні рішення

При каталозі на 50 000 товарів стандартний компонент catalog.section з AJAX-фільтром видавав 2-3 секунди на кожну зміну. Клієнти втрачали терпіння, конверсія падала. Ми впровадили Vue.js — і час реакції скоротився до 300–500 мс, що у 5 разів швидше за стандартний підхід. У нас 10+ років досвіду з Бітрікс та Vue, 50+ проєктів з інтеграції. Економія бюджету клієнта за рахунок зниження серверних навантажень склала до 30% (від 5000 до 30000 грн на місяць). Скорочення витрат на обслуговування інфраструктури також помітне. Ми маємо офіційний сертифікат партнера 1С-Бітрікс, що гарантує якість робіт. У цій статті розберемо ключові архітектурні рішення, способи передачі даних, збірку та реальний кейс із практики. Якщо у вас схожа задача — зв'яжіться з нами для консультації та попереднього аналізу вашого проєкту.

Архітектура: віджет, SPA або гібрид

Вибір підходу залежить від задачі. Наприклад, для інтернет-магазину з великим каталогом гібридний підхід дає кращий баланс між SEO та продуктивністю. Віджети підходять для ізольованих блоків, SPA — для повноцінних особистих кабінетів або адміністративних панелей. У кожному випадку ми проєктуємо архітектуру з урахуванням вимог до швидкості, SEO та підтримки.

Віджет на сторінці — 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-запиту при першому завантаженні.

Чому Vue.js для інтернет-магазину на Бітрікс?

Стандартні компоненти Бітрікс використовують серверний рендеринг при кожному AJAX-запиті. При каталозі в 50 000+ позицій фільтрація займає 2-3 секунди. Vue.js переносить логіку на клієнт, скорочуючи час до 300-500 мс — у 5 разів швидше. Крім того, Vue спрощує реалізацію складних UI-сценаріїв: кошик з drag-and-drop, багатокрокові форми, інтерактивні калькулятори. Зниження навантаження на сервер також веде до економії на хостингу (орієнтовно від 5000 грн на місяць для великих проєктів).

Технічна реалізація

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

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. Детальніше в офіційній документації 1С-Бітрікс.

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

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

Налаштування кешування в Vue-додатку

Для підвищення продуктивності кешуйте відповіді REST-методів на стороні Vue за допомогою Pinia або composables. Намагайтеся мінімізувати кількість запитів — агрегуйте дані на сервері. Наприклад, один метод catalog.product.list з фільтрами та сортуванням повертає все необхідне для відображення списку.

Кейс: дилерський портал з фільтрацією

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

Що входить в роботу і терміни

Обсяг робіт

1. Аналітика поточної архітектури та схеми інтеграції.
2. Проєктування структури Vue-компонентів та REST-методів.
3. Розробка віджета/SPA з урахуванням кешування та SEO.
4. Налаштування збірки (Vite/Webpack) та підключення в шаблон Бітрікс.
5. Тестування на реальних даних та навантажувальне тестування.
6. Документація з експлуатації та інструкція для розробників.
7. Навчання вашої команди (до 2 годин).
8. Підтримка протягом 30 днів після здачі.

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

Терміни залежать від наявності готового REST API та складності бізнес-логіки. Вартість розраховується індивідуально після аналізу ваших задач (орієнтовно від 5000 грн за віджет).

Замовте консультацію

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

Отримайте консультацію вже сьогодні.