Разработка встраиваемых приложений на Vue.js для Битрикс24

Стандартные отчёты Битрикс24 не всегда покрывают специфику бизнеса. Когда нужна сложная условная логика в карточках CRM, агрегация данных из внешних систем или нестандартный UI, без кастомного приложения не обойтись. Мы разрабатываем встраиваемые приложения на Vue.js, которые работают внутри интерфейса Битрикс24 — как iframe или встроенный JS-модуль. Это расширяет функционал портала без потери производительности и без правки ядра. За 8 лет мы реализовали более 30 проектов: от простых дашбордов до интеграционных коннекторов с 1С и маркетплейсами. Наш подход: глубокое погружение в задачу, выбор оптимальной архитектуры и прозрачный процесс с фиксированными сроками.

В отличие от типовых решений из Маркетплейса, наше приложение полностью адаптируется под ваши бизнес-процессы. Вы получаете интерфейс, понятный сотрудникам, и интеграцию, работающую стабильно даже при пиковых нагрузках. Мы используем современный стек: Vue 3, Vite, Composable API, и строго соблюдаем рекомендации Битрикс24 по встраиванию. Благодаря тестированию на боевых порталах мы снижаем количество пост-релизных ошибок на 70%, а использование готовых шаблонов ускоряет разработку на 30%.

Как встраиваются приложения в Битрикс24?

Битрикс24 предоставляет два механизма размещения:

Для Vue-приложений стандартный выбор — iframe с отдельным хостингом или размещение в /local/apps/. Серверная часть может быть на Laravel, Node.js или на самом Битрикс.

Как инициализировать Vue внутри Битрикс24?

Подключение BX24 SDK и старт Vue-приложения:

<script src="//{{portal}}.bitrix24.ru/bitrix/js/rest/bx24/bx24.js"></script> <div id="app"></div> <script type="module" src="/assets/app.js"></script> 

import { createApp } from 'vue' import App from './App.vue' window.BX24.init(() => { const app = createApp(App) app.provide('bx24', window.BX24) app.mount('#app') }) 

Передача BX24 через provide/inject позволяет использовать его в любом компоненте без глобальных переменных.

Как выполняется интеграция REST API из Vue?

Для REST-вызовов используем BX24.callMethod или BX24.callBatch. Оборачиваем в промисы:

export function useBx24() { const bx24 = inject('bx24') function callMethod(method, params = {}) { return new Promise((resolve, reject) => { bx24.callMethod(method, params, (result) => { if (result.error()) reject(result.error()) else resolve(result.data()) }) }) } async function callBatch(calls) { return new Promise((resolve, reject) => { bx24.callBatch(calls, (results) => { const errors = Object.values(results).filter(r => r.error()) if (errors.length) reject(errors[0].error()) else resolve(Object.fromEntries( Object.entries(results).map(([k, v]) => [k, v.data()]) )) }) }) } return { callMethod, callBatch } } 

Типичный компонент списка сделок:

<script setup> import { ref, onMounted } from 'vue' import { useBx24 } from '@/composables/useBx24' const { callMethod } = useBx24() const deals = ref([]) const loading = ref(true) onMounted(async () => { deals.value = await callMethod('crm.deal.list', { select: ['ID', 'TITLE', 'STAGE_ID', 'OPPORTUNITY'], filter: { STAGE_ID: 'NEW' }, order: { DATE_CREATE: 'DESC' } }) loading.value = false }) </script> 

Почему важно управлять размером iframe?

Битрикс24 не управляет высотой iframe автоматически. Приложение должно само сообщать о своём размере. Используйте bx24.fitWindow() для статических страниц и ResizeObserver для динамических — это предотвращает появление полос прокрутки внутри портала. В компоненте Vue вызывайте fitWindow() в хуках onMounted и onUpdated.

Авторизация и права доступа

Токен доступа передаётся автоматически через BX24 SDK. Для серверных запросов используйте bx24.getAuth() — он возвращает access_token, который передаётся в заголовке Authorization: Bearer. Проверка прав пользователя — через методы вроде crm.contact.access.has.

Сборка и деплой

Vite — оптимальный выбор для сборки:

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], base: '/local/apps/my-app/', build: { outDir: 'dist', assetsDir: 'assets', } }) 

Собранный dist/ размещается на сервере. В настройках приложения Битрикс24 прописывается URL точки входа. Для локальной разработки используем ngrok или Vite dev server с HTTPS.

Что входит в работу?

Типичные сценарии применения

Дашборд по сделкам — агрегация данных из CRM, визуализация воронки, фильтры по ответственным и периодам. Стандартных отчётов Битрикс24 для нестандартных срезов недостаточно.

Кастомная форма создания заявки — мультишаговая форма с валидацией, зависимыми полями, загрузкой файлов. Стандартная карточка CRM не поддерживает сложную условную логику.

Интеграционный коннектор — приложение получает данные из внешней системы (1С, ERP, маркетплейс) и отображает их в контексте Битрикс24 с синхронизацией.

Планировщик задач — кастомный UI с drag-and-drop, kanban-доской или timeline-видом поверх стандартного API задач. Наше решение работает быстрее типовых виджетов за счёт кэширования и тегированного кэша Битрикс.

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

Простое приложение (один экран, CRUD по одной сущности) — 2–3 рабочих дня. Приложение с несколькими экранами, авторизацией, серверной частью и деплоем — 1–2 недели в зависимости от сложности бизнес-логики.

Оцените ваш проект — мы подготовим коммерческое предложение в течение 1 рабочего дня. Закажите разработку сегодня и получите готовое приложение в оговоренный срок с гарантией корректной работы.

Свяжитесь с нами, чтобы обсудить детали вашего проекта.

Документация Битрикс24: "Приложения встраиваются через iframe или JS SDK" — dev.1c-bitrix.ru Больше о Vue.js — Wikipedia