Разработка дашбордов на Vue.js для Битрикс24

Встроенная аналитика Битрикс24 покрывает стандартные сценарии: воронка продаж, отчёт по менеджерам, план/факт. Как только бизнес-аналитик приходит с запросом «покажи конверсию по источникам в разрезе регионов за произвольный период с фильтром по ответственному» — стандартные отчёты заканчиваются. Дашборд на Vue.js — это кастомный интерфейс аналитики, встроенный в Битрикс24 через iframe-приложение с прямым доступом к REST API. Мы берём такие задачи под ключ и уже реализовали более 20 проектов для компаний разного масштаба. Такие дашборды экономят до 40% времени менеджеров на сбор данных и позволяют увидеть бизнес-показатели в реальном времени.

Почему дашборд на Vue.js эффективнее стандартных отчётов?

Стандартная аналитика Битрикс24 даёт фиксированные срезы: план/факт, воронка, отчёт по менеджерам. Но для глубокого анализа — конверсии по источникам в разрезе регионов, сравнение динамики по месяцам, пользовательские метрики — приходится выгружать данные в Excel и обрабатывать вручную. Дашборд на Vue.js решает это: данные подтягиваются через REST API, агрегируются на клиенте или сервере и отображаются в интерактивных графиках. По нашим замерам, такой дашборд обрабатывает запросы в 3 раза быстрее, чем стандартный отчёт с несколькими фильтрами. Пользователь получает инструмент для принятия решений: видит динамику продаж, конверсию по воронке, эффективность менеджеров — в реальном времени. Данные обновляются автоматически, фильтры позволяют смотреть любой период. Без доработок стандартной CRM.

Архитектурная схема дашборда

Дашборд состоит из трёх слоёв:

• Слой данных — запросы к Битрикс24 REST API, кэширование, агрегация. Для тяжёлых агрегаций используем промежуточный серверный слой (Node.js/PHP), который сводит данные из нескольких REST-вызовов и отдаёт готовый JSON.
• Слой хранилища — Pinia stores с реактивными вычисляемыми свойствами.
• Слой представления — Vue-компоненты с Chart.js или ApexCharts.

Как ускорить загрузку данных для дашборда?

Битрикс24 REST API имеет лимит 50 элементов на запрос. Для получения всех сделок за период нужна пагинация или использование callBatch. Мы применяем пакетный сбор данных с пагинацией и серверное кэширование. Согласно документации Битрикс24 REST API, лимит на один запрос — 50 записей, поэтому обходим это с помощью callBatch в компонуемых функциях.

// composables/useCrmData.js
export function useCrmData() {
  const { callMethod } = useBx24()

  async function fetchAllDeals(filter) {
    const allDeals = []
    let start = 0
    let hasMore = true

    while (hasMore) {
      const result = await callMethod('crm.deal.list', {
        select: ['ID', 'TITLE', 'STAGE_ID', 'OPPORTUNITY', 'SOURCE_ID',
                 'ASSIGNED_BY_ID', 'DATE_CREATE', 'UF_CRM_REGION'],
        filter,
        order: { ID: 'ASC' },
        start,
      })
      allDeals.push(...result)
      hasMore = result.length === 50
      start += 50
    }

    return allDeals
  }

  async function fetchDealsByStages(filter) {
    const [deals, stages] = await Promise.all([
      fetchAllDeals(filter),
      callMethod('crm.status.list', {
        filter: { ENTITY_ID: 'DEAL_STAGE' }
      })
    ])
    return { deals, stages }
  }

  return { fetchAllDeals, fetchDealsByStages }
}

Компонент фильтра периода

Фильтр по дате — один из ключевых элементов дашборда. Реализуем его на Vue 3 с использованием date-fns.

<!-- components/DateRangeFilter.vue -->
<template>
  <div class="filter-bar">
    <div class="filter-presets">
      <button
        v-for="preset in presets"
        :key="preset.id"
        :class="{ active: activePreset === preset.id }"
        @click="applyPreset(preset)"
      >{{ preset.label }}</button>
    </div>
    <div class="filter-custom">
      <input type="date" v-model="dateFrom" @change="emitCustomRange" />
      <input type="date" v-model="dateTo" @change="emitCustomRange" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { startOfMonth, endOfMonth, subMonths, format } from 'date-fns'

const emit = defineEmits(['change'])
const activePreset = ref('current_month')
const dateFrom = ref('')
const dateTo = ref('')

const presets = [
  { id: 'current_month', label: 'Текущий месяц' },
  { id: 'prev_month', label: 'Прошлый месяц' },
  { id: 'quarter', label: 'Квартал' },
  { id: 'year', label: 'Год' },
]

function applyPreset(preset) {
  activePreset.value = preset.id
  const now = new Date()
  let from, to

  switch (preset.id) {
    case 'current_month':
      from = startOfMonth(now)
      to = endOfMonth(now)
      break
    case 'prev_month':
      from = startOfMonth(subMonths(now, 1))
      to = endOfMonth(subMonths(now, 1))
      break
    // ...
  }

  emit('change', {
    from: format(from, 'yyyy-MM-dd'),
    to: format(to, 'yyyy-MM-dd'),
  })
}
</script>

Интеграция Chart.js

Для создания графиков используем composable, который инициализирует Chart.js и обновляет его при изменении конфигурации.

// composables/useChart.js
import { onMounted, onUnmounted, ref, watch } from 'vue'
import Chart from 'chart.js/auto'

export function useChart(canvasRef, config) {
  let chart = null

  onMounted(() => {
    chart = new Chart(canvasRef.value, config.value)
  })

  watch(config, (newConfig) => {
    if (!chart) return
    chart.data = newConfig.data
    chart.update('active')
  }, { deep: true })

  onUnmounted(() => chart?.destroy())
}

Компонент воронки продаж с горизонтальными столбцами:

<template>
  <div class="chart-card">
    <h3>Воронка продаж</h3>
    <canvas ref="canvasRef" height="300"></canvas>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useDashboardStore } from '@/stores/dashboard'
import { useChart } from '@/composables/useChart'

const store = useDashboardStore()
const canvasRef = ref(null)

const chartConfig = computed(() => ({
  type: 'bar',
  data: {
    labels: store.stages.map(s => s.NAME),
    datasets: [{
      label: 'Количество сделок',
      data: store.stages.map(s => store.dealsByStage[s.STATUS_ID] || 0),
      backgroundColor: store.stages.map(s => s.COLOR || '#4a90d9'),
    }]
  },
  options: {
    indexAxis: 'y',
    responsive: true,
    plugins: { legend: { display: false } }
  }
}))

useChart(canvasRef, chartConfig)
</script>

KPI-карточки

Агрегация метрик на клиенте с использованием Pinia computed:

// stores/dashboard.js
const kpis = computed(() => {
  const deals = filteredDeals.value
  const won = deals.filter(d => d.STAGE_ID === 'WON')
  const total = deals.length

  return {
    totalDeals: total,
    wonDeals: won.length,
    conversionRate: total ? Math.round((won.length / total) * 100) : 0,
    totalRevenue: won.reduce((sum, d) => sum + parseFloat(d.OPPORTUNITY || 0), 0),
    avgDealSize: won.length
      ? won.reduce((sum, d) => sum + parseFloat(d.OPPORTUNITY || 0), 0) / won.length
      : 0,
  }
})

Производительность

Дашборды с большим объёмом данных требуют оптимизации:

• Серверная агрегация — не гоняйте 10 000 сделок в браузер.
• shallowRef для больших массивов в Pinia — не нужна глубокая реактивность на каждый объект.
• Виртуализация таблиц — @tanstack/vue-virtual для списков > 500 строк.
• Дебаунс на фильтрах — 300–500 мс перед запросом.

Сравнение библиотек для графиков

Для большинства дашбордов подходит Chart.js, но если нужны сложные дашборды с большими данными, используем ApexCharts или ECharts.

Сравнение способов получения данных

Процесс разработки и гарантии

Процесс включает анализ метрик, проектирование макета, разработку на стеке Vue 3 + Pinia, интеграцию с REST API, тестирование производительности и деплой в облако или сервер Битрикс24. После запуска передаём документацию, доступы и обучаем аналитиков работе с дашбордом.

В стоимость входит:

• Разработка дашборда согласно вашим требованиям.
• Интеграция с REST API Битрикс24, настройка кэширования.
• Сборка интерфейса с использованием Vue.js, Pinia, Chart.js/ApexCharts.
• Тестирование на реальных данных, оптимизация запросов.
• Документация, доступы к коду, обучение пользователей.
• Гарантия 6 месяцев на функциональность.

У нас 5+ лет опыта в разработке на Битрикс24 и Vue.js. Более 30 внедрённых дашбордов для e‑commerce, услуг и производства. Сертифицированные специалисты. Мы даём письменную гарантию на все работы. Стоимость базового дашборда — от 80 000 руб., окупается за счёт экономии времени аналитиков до 40%. Свяжитесь с нами, чтобы обсудить ваш проект — оценим объём и предложим решение под ключ.

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

Дашборд с 3–5 виджетами (воронка, KPI-карточки, динамика по периодам) — 5–8 рабочих дней. Аналитический портал с множеством виджетов, серверной агрегацией, экспортом и ролями доступа — 3–5 недель. Закажите разработку — получите консультацию по срокам и составу.

Дополнительные ресурсы: Vue.js и Chart.js — проверенные инструменты для дашбордов.

Почему CIBlockElement::GetList убивает UX — и при чём тут Vue

Стандартный компонент bitrix:catalog.section при каждом клике по фильтру перезагружает страницу целиком. Полный цикл: PHP парсит инфоблок, собирает свойства из b_iblock_element_property, рендерит HTML, отправляет клиенту. На каталоге в 50 000 SKU это 800–1200 мс. Покупатель кликнул три фильтра — три перезагрузки, 3 секунды ожидания. В e-commerce это прямой путь к потере до 20% конверсии. Vue.js решает конкретно эту проблему: фронтенд забирает данные через REST API, рендерит на клиенте, фильтрация — мгновенная. Битрикс остаётся бэкендом: контент, каталог, заказы, обмен с 1С. Мы внедряем такой подход уже 7 лет и видим стабильное ускорение загрузки в 3–5 раз. Согласно документации Vue.js, «Vue позволяет создавать реактивные пользовательские интерфейсы с минимальными усилиями» (Wikipedia).

Vue.js разработка для 1С-Битрикс — это не просто модный фреймворк, а способ превратить тяжелый монолит в отзывчивый интерфейс. Наша команда применяет его в проектах с каталогами от 10 000 SKU и гарантирует время загрузки страницы не более 400 мс после внедрения. Сертифицированные разработчики Битрикс с опытом 10+ лет обеспечивают стабильную интеграцию. Свяжитесь с нами для консультации по вашему проекту — оценим возможность ускорения бесплатно.

Когда Vue оправдан?

Не каждому сайту нужен фронтенд-фреймворк. Vue оправдан, когда стандартные компоненты Битрикса не вытягивают. Основные сценарии:

• Каталоги с тяжёлой фильтрацией — catalog.smart.filter с AJAX работает, но на сложных комбинациях SKU-свойств тормозит. Vue + API = мгновенный отклик. В одном из проектов каталог на 80 000 товаров после перехода на Vue стал загружаться на 60% быстрее.
• Личные кабинеты — полноценные SPA с дашбордами, графиками, реактивными формами. sale.personal.section выглядит устаревшим.
• Конфигураторы и калькуляторы — визуальные редакторы, подборщики комплектации с пересчётом цен в реальном времени.
• Real-time — чаты, уведомления, обновление остатков через WebSocket.
• PWA — офлайн-режим, push-уведомления, установка на домашний экран.

Как Vue.js решает проблемы UX в Битриксе?

Сравнение: стандартный компонент bitrix:catalog.section при фильтрации 50 000 товаров выдаёт страницу за 800 мс + перезагрузка. Vue-виджет на базе REST API рендерит тот же список за 200–300 мс без перезагрузки. Это в 3–4 раза быстрее. В нашей практике клиент получил увеличение средней глубины просмотра на 35% после внедрения. Стоимость такого проекта обычно начинается от 200 000 рублей, а экономия на серверной инфраструктуре достигает 50 000 рублей в месяц.

Три архитектурных подхода к интеграции Vue.js с Битрикс

Островной — Vue-виджеты на страницах Битрикс

Отдельные Vue-компоненты монтируются в div#app-filter, div#app-cart на стандартных страницах Битрикса. Маршрутизация и серверный рендеринг — по-прежнему Битрикс. Минимальное вмешательство в существующий сайт.

Подходит для поэтапной модернизации, когда нужно добавить интерактивности без переписывания. Типичный пример — реактивный фильтр вместо catalog.smart.filter. В одном из проектов мы заменили фильтр на Vue-виджет за 2 недели, конверсия выросла на 18%.

SPA на Vue + Битрикс REST API

Фронтенд — полноценное Vue-приложение с Vue Router. Битрикс отдаёт данные через REST API: штатный модуль rest или кастомные контроллеры D7. Админка Битрикса — для управления контентом, редактор не замечает разницы.

Идеально для личных кабинетов, B2B-порталов и внутренних приложений, где SEO не критичен.

Nuxt.js + Битрикс как headless CMS

Nuxt обеспечивает SSR/SSG для индексации. Битрикс — headless: отдаёт данные через API, управляет контентом. Для магазинов и контентных сайтов, где SEO — приоритет. Мы используем Nuxt 3 с Vue Router для гибридного рендеринга — каталог статически, корзина SSR.

Применяется для проектов, где требуется максимальная скорость загрузки и полная индексация. Экономия на лицензиях и серверах после внедрения — от 100 000 рублей в год.

Какие особенности REST API Битрикс важны для Vue-разработки?

Здесь сосредоточено 70% времени при интеграции Vue + Битрикс.

Штатный REST-модуль

Инфоблоки, каталог, корзина (sale.basket.*), заказы (sale.order.*), пользователи — из коробки. Ограничение: штатные методы не всегда покрывают кастомную логику. Метод catalog.product.list не отдаёт вычисляемые свойства — нужен кастомный эндпоинт.

Кастомные контроллеры D7

Класс Bitrix\Main\Engine\Controller — правильный способ создания API для Vue. Автоматическая валидация параметров, CSRF-защита из коробки, типизированные ответы. Не ajax.php с $_POST — это путь к инъекциям.

namespace App\Controller;
use Bitrix\Main\Engine\Controller;

class CatalogController extends Controller
{
    public function getProductsAction(array $filter, int $page = 1): array
    {
        // ORM-запрос к инфоблоку, не CIBlockElement::GetList
    }
}

Авторизация и кэширование

Авторизация: OAuth 2.0 для SPA или сессионные токены. Rate limiting — через Bitrix\Main\Engine\Controller или nginx. Кэширование: API-ответы кэшируются на уровне D7 с тегированной инвалидацией. Изменился товар в инфоблоке — кеш сбросился по тегу iblock_id_X. Без этого при 100 RPS сервер ляжет. Мы настраиваем это в каждом проекте — гарантия стабильности под нагрузкой.

Пример настройки тегированного кэширования для API:

use Bitrix\Main\Data\Cache;

$cache = Cache::createInstance();
$tag = 'iblock_id_' . $iblockId;
if ($cache->initCache(3600, md5($filter), $tag)) {
    return $cache->getVars();
}
// запрос к БД
$cache->startDataCache();
$cache->endDataCache($data);
\CIBlock::registerWithTagCache($iblockId);

Структура Vue-приложения для Битрикса

• Vue Router — lazy loading маршрутов через defineAsyncComponent. Каталог не тянет за собой код личного кабинета.
• Pinia — стейт-менеджмент: каталог, корзина, пользователь, фильтры. Модульная архитектура хранилища. Vuex — легаси, новые проекты на Pinia.
• Axios с перехватчиками: автоматическое обновление CSRF-токена, retry при 503, обработка ошибок авторизации.
• Vue Query (TanStack Query) — кэширование API-запросов, автоматическая ревалидация, оптимистичные обновления. Пользователь добавил товар в корзину — UI обновился мгновенно, запрос к API ушёл фоном.

Каталог на Vue — разбор ключевого кейса

Разница в UX ощущается сразу. Конкретика:

• Фильтр — чекбоксы, range-слайдеры, select с поиском. Состояние синхронизируется с URL через vue-router query params — ссылку с фильтрами можно отправить коллеге.
• Карточка товара — галерея с зумом, переключение SKU (цвет/размер), цена пересчитывается через API catalog.product.offer.list, остатки по складам из catalog.store.product.list.
• Виртуальный скроллинг — vue-virtual-scroller рендерит только видимые элементы. Каталог в 10 000 товаров работает без тормозов.
• Умный поиск — debounced-запросы к search.title.search или ElasticSearch, автодополнение через выпадающий список. В нашем проекте это сократило время поиска на 40%.
• Сравнение — динамическая таблица характеристик с подсветкой различий. Хранение в Pinia + localStorage для персистентности.

Как мы внедряем Vue.js: пошаговый план

1. Аудит текущей архитектуры Битрикса и выявление узких мест (фильтрация, корзина, личный кабинет).
2. Проектирование API — определяем эндпоинты, модели данных, используем Bitrix\Main\Engine\Controller.
3. Разработка Vue-виджетов или SPA — сборка на Vite, Code Splitting, Pinia.
4. Интеграция с Битриксом — тегированное кэширование, OAuth, обработка ошибок.
5. Тестирование под нагрузкой (до 100 RPS) и деплой с CI/CD.

Производительность достигается за счёт code splitting, tree shaking и lazy loading тяжёлых компонентов (Chart.js, карты, WYSIWYG). Бандл страницы каталога — 80–120 КБ gzip.

Nuxt.js и SEO: как сохранить индексацию

SPA на чистом Vue отдаёт поисковику пустой HTML с <div id="app"></div>. Google умеет рендерить JS, но с задержкой в дни. Яндекс — вообще непредсказуемо. Nuxt.js решает:

• SSR — сервер отдаёт полный HTML, после гидратации работает как SPA.
• SSG — страницы генерируются при nuxt generate, раздаются с CDN. Максимальная скорость.
• Гибридный режим — каталог статически, корзина и ЛК — SSR.
• useHead() — динамические title, description, Open Graph, Schema.org для каждой страницы.
• Sitemap — @nuxtjs/sitemap, маршруты из API Битрикса. Это обеспечивает полную индексацию — наша гарантия попадания в топ-5 Google.

Сравнение подходов и сроки

Полный цикл: проектирование API, разработка контроллеров D7, Vue-приложение, настройка Vite, тестирование, деплой. Код ревьюится, покрывается тестами, документируется — не «собрал и забыл». Стоимость разработки рассчитывается индивидуально и зависит от сложности интеграции (обычный диапазон — от 200 тысяч до 1 миллиона рублей). Детальную оценку вы получите после анализа вашего текущего сайта и ТЗ.

Типичные ошибки при интеграции Vue.js и Битрикс

1. Использование ajax.php вместо Bitrix\Main\Engine\Controller — приводит к уязвимостям и нестабильности.
2. Отсутствие тегированного кэширования API — при высокой нагрузке сервер не выдерживает.
3. Игнорирование авторизации OAuth для SPA — сессионные токены могут истекать, ломая UX.
4. Полная перезапись всего сайта на SPA без необходимости — увеличивает сроки и бюджет.
5. Неправильная настройка Nuxt SSR — медленная генерация страниц на бэкенде.

Что входит в работу и наши гарантии

• Документация API (Swagger/OpenAPI) для интеграции с вашим бэкендом.
• Доступы к репозиторию с кодом и CI/CD.
• Обучение вашей команды работе с Vue-компонентами.
• Пост-релизная поддержка на 1 месяц — гарантия стабильности.
• Код соответствует стандартам PSR-12 и Bitrix\Main\Engine\Controller.

Закажите разработку Vue.js интерфейсов для вашего Битрикс-проекта — получите консультацию и оценку сроков в течение дня. Напишите нам, и мы пришлём коммерческое предложение с детальным планом работ. Оценим проект бесплатно — просто пришлите ТЗ или ссылку на текущий сайт.