Vue Project
Guide for installing Bitrix24 JS SDK in Vue applications.
We are still updating this page. Some data may be missing here — we will complete it shortly.
Add to a Vue project
Install the Bitrix24 JS SDK package
pnpm add @bitrix24/b24jssdk
yarn add @bitrix24/b24jssdk
npm install @bitrix24/b24jssdk
bun add @bitrix24/b24jssdk
Import
Import the library into your project:
import { LoggerFactory } from '@bitrix24/b24jssdk'
Init
To work with Bitrix24 from the application built into the Bitrix24 interface use the B24Frame object.
It is initialized on the client side using initializeB24Frame().
SomePage.vue
<script setup lang="ts">
import type { LoggerFactory, B24Frame } from '@bitrix24/b24jssdk'
import { onMounted, onUnmounted } from 'vue'
const $logger = LoggerFactory.createForBrowser('B24/jsSdk::vue', true)
let $b24: undefined | B24Frame
async function someFunction(): Promise<void> {
if (!$b24) {
return
}
// ...
}
onMounted(async () => {
try {
$b24 = await initializeB24Frame()
} catch (error) {
$logger.error('Some problems', { error })
}
})
onUnmounted(() => {
$b24?.destroy()
})
</script>
The
B24Hook object is intended exclusively for use on the server.- A webhook contains a secret access key, which MUST NOT be used in client-side code (browser, mobile app).
- For the client side, use
B24Frame
To work with Bitrix24 from a standalone server-side application, use the B24Hook object.
import { B24Hook } from '@bitrix24/b24jssdk'
// 1. Get the webhook URL from Bitrix24:
// - Go to Bitrix24
// - Settings → Developers → Webhooks
// - Create a new webhook with the required permissions
// - Copy the URL in the format: https://your-domain.bitrix24.com/rest/1/your-token/
// 2. Initialize B24Hook
const $b24 = B24Hook.fromWebhookUrl('https://your-domain.bitrix24.com/rest/1/your-token/')
// 3. Use API methods
The
B24OAuth object is intended exclusively for use on the server.- A b24OAuth contains a secret access key, which MUST NOT be used in client-side code (browser, mobile app).
- For the client side, use
B24Frame
To work with Bitrix24 from a standalone server-side application, use the B24OAuth object.
import { B24OAuth } from '@bitrix24/b24jssdk'
// 1. Register an application in Bitrix24:
// - Go to Bitrix24
// - Settings → Developers → Applications
// - Create a new application
// - Get the Client ID and Client Secret
// 2. Initialize B24OAuth
const $b24 = B24OAuth.fromConfig({
domain: 'your-domain.bitrix24.com',
clientId: 'your_client_id',
clientSecret: 'your_client_secret',
accessToken: 'current_access_token',
refreshToken: 'refresh_token'
})
// 3. Use API methods
// B24OAuth automatically refreshes tokens when they expire