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

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

SPA (Single Page Application) на Vue поверх Бітрікс — це коли весь клієнтський інтерфейс керується Vue Router, а Бітрікс виступає API-сервером і генерує єдину HTML-сторінку з точкою монтування. Основна проблема — SEO та первинне завантаження: без SSR пошукові боти бачать порожній div.

Архітектура: Бітрікс як BFF

Бітрікс стає Backend for Frontend. Структура:

• Шаблон сайту (header.php, footer.php) — мінімальний HTML, мета-теги (для SEO-сторінок рендеряться сервером), підключення Vue-бандла
• Роутинг — на стороні Бітрікс налаштовується одне правило: всі запити до SPA-розділу віддають один шаблон. Решта розділів сайту працює як зазвичай
• API — кастомні контролери через \Bitrix\Main\Engine\Controller або REST API модуля rest

Приклад роутингу в nginx для SPA-розділу /app/:

location /app/ {
    try_files $uri /app/index.php;
}

Vue Router + Історія браузера

Vue Router у режимі createWebHistory() — URL виглядають як /app/catalog/123 без хешів. Для коректної роботи Бітрікс повинен віддавати один PHP-шаблон для всіх URL розділу:

// В index.php розділу /app/
define('STOP_STATISTICS', true); // Не записувати в b_stat кожен клієнт-роут
$APPLICATION->SetTitle(''); // SPA керує заголовком сам
require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/header.php');
echo '<div id="spa-app"></div>';
require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/footer.php');

Авторизація в SPA

Користувач авторизований у Бітрікс — це стандартна PHP-сесія. Vue-застосунок при ініціалізації запитує поточного користувача:

// api/user.js
export async function getCurrentUser() {
    const response = await fetch('/bitrix/services/main/ajax.php?action=user.get');
    return response.json();
}

Для автентифікації через токени (JWT) — потрібен кастомний модуль, Бітрікс нативно JWT не підтримує.

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

Для SPA з авторизацією, кошиком і каталогом — три store:

// stores/auth.js
export const useAuthStore = defineStore('auth', {
    state: () => ({ user: null, isLoading: false }),
    actions: {
        async fetchUser() { /* GET /api/user */ },
        async logout() { /* POST /api/logout */ }
    }
});

Бітрікс-сесія синхронізується з Pinia через API-запити, а не через localStorage — це важливо для безпеки.

SEO для SPA

SPA без SSR — проблема для Яндекс і Google. Варіанти:

• Prerendering (через vite-plugin-prerender або Puppeteer) — для статичних сторінок каталогу
• SSR (nuxt або vite-ssr) — якщо Бітрікс стоїть за Node.js-проксі (складна інфраструктура)
• Гібрид: SEO-важливі сторінки рендерить Бітрікс серверно, SPA — лише для авторизованих користувачів (ОК, кошик)

Для більшості проєктів оптимальний гібрид: публічні сторінки (каталог, картка товару) — Бітрікс, особистий кабінет та оформлення замовлення — SPA.

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

B2B-портал для дилерів: після авторизації користувач потрапляє в SPA з каталогом, кошиком, історією замовлень та керуванням дочірніми акаунтами. Публічна частина сайту — звичайний Бітрікс з SEO. Розмежування: /dealer/* — SPA, все інше — стандартний Бітрікс.

Технічний стек: Vue 3 + Pinia + Vue Router, Vite для збірки, бандл у /local/templates/main/dealer-app/. API — кастомні контролери на \Bitrix\Main\Engine\Controller з авторизацією через стандартну Бітрікс-сесію. Час розробки — 25 робочих днів.

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