Разработка 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 рабочих дней.

Сроки выполнения