1С-Битрикс + Vue: архитектура, API и практический пример

Vue удобно использовать там, где стандартной серверной страницы недостаточно: в конфигураторах, личных кабинетах, сложных фильтрах, рабочих столах и пошаговых формах. При этом 1С-Битрикс может оставаться backend-платформой с пользователями, правами, инфоблоками и административной частью.

Три варианта архитектуры

1. Vue-виджет внутри страницы. Небольшое приложение монтируется в контейнер существующего шаблона. Подходит для калькулятора, фильтра или формы.
2. SPA в каталоге проекта. Битрикс отдаёт оболочку и API, а маршрутизацией интерфейса управляет Vue Router.
3. Отдельный frontend. Vue размещается отдельно и обращается к REST API. Этот вариант требует отдельной схемы авторизации, CORS и развёртывания.

Для первого внедрения обычно безопаснее начать с виджета: меньше изменений в маршрутизации, проще использовать текущую сессию и легче вернуть серверный вариант.

Как организовать API

API размещают в собственном модуле или в /local/, но не в ядре /bitrix/. Серверный код подключает пролог, загружает нужные модули через Loader::includeModule(), проверяет права и формирует JSON.

Для чтения можно использовать GET, а для изменений — POST с проверкой сессии. Не передавайте frontend внутренние поля, служебные свойства и данные, на которые у пользователя нет прав.

 [
        ['id' => 101, 'name' => 'Пример элемента'],
    ],
]);

В рабочем проекте данные получают через D7 API, применяют фильтры и постраничную навигацию. Пример выше показывает только форму ответа, а не готовую точку доступа.

Запрос из Vue

Фрагмент для секции script setup Vue-компонента:
import { onMounted, ref } from 'vue'

const items = ref([])
const loading = ref(true)

onMounted(async () => {
  try {
    const response = await fetch('/local/api/catalog.php', {
      credentials: 'same-origin'
    })
    if (!response.ok) throw new Error('API request failed')
    const data = await response.json()
    items.value = data.items ?? []
  } finally {
    loading.value = false
  }
})

Для POST-запросов передавайте sessid и проверяйте его на сервере через check_bitrix_sessid(). Для отдельного домена не переносите cookie «как есть» — используйте продуманную OAuth- или token-схему и ограничьте CORS конкретными источниками.

Сборка и подключение

Собирайте Vue через Vite в каталог шаблона или модуля, сохраняйте manifest и подключайте итоговые CSS/JS через менеджер ресурсов 1С-Битрикс. Имена файлов с хешами позволяют долго кешировать статику и безопасно обновлять сборку.

Не коммитьте node_modules и исходные карты в публичный каталог без необходимости. Версии Node.js и пакетов фиксируйте lock-файлом.

Кеширование и производительность

Кешируйте тяжёлые выборки на стороне PHP, а при изменении данных очищайте кеш по тегам или событиям. Во Vue избегайте повторных запросов, добавляйте отмену устаревших запросов и показывайте состояния загрузки и ошибки.

Чек-лист безопасности

• Проверять авторизацию и права на каждой операции API.
• Валидировать типы, длину и допустимые значения параметров.
• Использовать CSRF-защиту для изменяющих запросов.
• Не возвращать персональные и служебные данные без необходимости.
• Ограничивать частоту дорогих запросов и вести журнал ошибок.

Полезная документация

• Курс разработчика Bitrix Framework
• D7 Engine и контроллеры
• Официальное руководство Vue
• Официальное руководство Vite