Developing Embeddable Vue.js Applications for Bitrix24

Standard Bitrix24 reports do not always cover business specifics. When you need complex conditional logic in CRM cards, data aggregation from external systems, or a non-standard UI, a custom application is essential. We develop embeddable applications on Vue.js that work inside the Bitrix24 interface — as an iframe or an embedded JS module. This extends the portal’s functionality without losing performance or modifying the core. Over the past 8 years, we have implemented more than 30 projects: from simple dashboards to integration connectors with 1C and marketplaces. Our approach: deep immersion into the task, selection of the optimal architecture, and a transparent process with fixed deadlines.

Unlike typical solutions from the Marketplace, our application fully adapts to your business processes. You get an interface that employees understand and an integration that works stably even under peak loads. We use a modern stack: Vue 3, Vite, Composable API, and strictly follow Bitrix24’s embedding recommendations. By testing on live portals, we reduce the number of post-release errors by 70%, and using ready-made templates speeds up development by 30%.

How Are Applications Embedded in Bitrix24?

Bitrix24 provides two embedding mechanisms:

For Vue applications, the standard choice is an iframe with separate hosting or placement in /local/apps/. The server part can be on Laravel, Node.js, or on Bitrix itself.

How to Initialize Vue Inside Bitrix24?

Connecting the BX24 SDK and starting the Vue application:

<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') }) 

Passing BX24 via provide/inject allows using it in any component without global variables.

How to Integrate REST API from Vue?

For REST calls we use BX24.callMethod or BX24.callBatch. Wrap them in promises:

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 } } 

A typical deal list component:

<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> 

Why Is Managing the iframe Size Important?

Bitrix24 does not automatically manage the iframe height. The application must report its own size. Use bx24.fitWindow() for static pages and ResizeObserver for dynamic ones — this prevents scrollbars inside the portal. In Vue components, call fitWindow() in the onMounted and onUpdated hooks.

Authorization and Access Rights

The access token is passed automatically via the BX24 SDK. For server-side requests, use bx24.getAuth() — it returns an access_token that is passed in the Authorization: Bearer header. Checking user rights is done via methods like crm.contact.access.has.

Build and Deployment

Vite is the optimal choice for building:

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', } }) 

The built dist/ folder is placed on the server. In the Bitrix24 application settings, the entry point URL is specified. For local development, we use ngrok or a Vite dev server with HTTPS.

What Is Included in the Work?

Typical Use Cases

Dashboard for deals — aggregation of CRM data, funnel visualization, filters by responsible persons and periods. Standard Bitrix24 reports are insufficient for non-standard slices.

Custom request form — multi-step form with validation, dependent fields, file upload. The standard CRM card does not support complex conditional logic.

Integration connector — the application receives data from an external system (1C, ERP, marketplace) and displays it in the Bitrix24 context with synchronization.

Task scheduler — custom UI with drag-and-drop, kanban board, or timeline view on top of the standard task API. Our solution works faster than typical widgets due to caching and Bitrix’s tagged cache.

Timelines

Simple application (one screen, CRUD for one entity) — 2–3 working days. Application with multiple screens, authorization, server part, and deployment — 1–2 weeks depending on the complexity of the business logic.

Assess your project — we will prepare a commercial proposal within 1 working day. Order development today and get a finished application within the agreed timeframe with a guarantee of correct operation.

Contact us to discuss the details of your project.

Bitrix24 documentation: "Applications are embedded via iframe or JS SDK" — dev.1c-bitrix.ru More about Vue.js — Wikipedia