Розробка дашбордів на 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, послуг та виробництва. Сертифіковані спеціалісти. Ми даємо письмову гарантію на всі роботи. Вартість базового дашборда розраховується індивідуально, окупається за рахунок економії часу аналітиків до 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 дозволяє створювати реактивні користувацькі інтерфейси з мінімальними зусиллями».

Розробка на Vue.js для 1С-Бітрікс — спосіб перетворити важкий моноліт на чуйний інтерфейс. Ми застосовуємо його в проектах з каталогами від 10 000 SKU і гарантуємо час завантаження сторінки не більше 400 мс після впровадження. Сертифіковані розробники Бітрікс з досвідом 10+ років та понад 50 успішними впровадженнями забезпечують стабільну інтеграцію. Зв'яжіться з нами для консультації — оцінимо можливість прискорення безкоштовно.

Коли 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% після впровадження. Економія на серверній інфраструктурі сягає 70% завдяки зменшенню кількості PHP-запитів.

Три архітектурні підходи до інтеграції 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. Економія на ліцензіях і серверах після впровадження становить десятки тисяч гривень на рік.

Які особливості 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 сервер ляже. Ми налаштовуємо це в кожному проекті — гарантія стабільності під навантаженням. Приклад налаштування тегованого кешування:

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, тестування, деплой. Код рев'юється, покривається тестами, документується — не «зібрав і забув». Вартість розробки розраховується індивідуально після аналізу вашого поточного сайту та ТЗ. Детальну оцінку ви отримаєте протягом дня — замовте консультацію.

Типові помилки при інтеграції 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 інтерфейсів для вашого Бітрікс-проекту — отримайте консультацію та оцінку строків протягом дня. Напишіть нам, і ми надішлемо комерційну пропозицію з детальним планом робіт. Оцінимо проект безкоштовно — просто надішліть ТЗ або посилання на поточний сайт.