Nuxt Project

Guide for installing Bitrix24 JS SDK in Nuxt applications.

We are still updating this page. Some data may be missing here — we will complete it shortly.

Add to a Nuxt project

To access the Bitrix24 JS SDK in a Nuxt project, use the @bitrix24/b24jssdk-nuxt module.

Requires Nuxt 4. Make sure to upgrade to Nuxt 4 you begin.

Install the Bitrix24 JS SDK package

pnpm add @bitrix24/b24jssdk-nuxt

yarn add @bitrix24/b24jssdk-nuxt

npm install @bitrix24/b24jssdk-nuxt

bun add @bitrix24/b24jssdk-nuxt

Add the Bitrix24 JS SDK module in your `nuxt.config.ts`

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@bitrix24/b24jssdk-nuxt']
})

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

Vue

Guide for installing Bitrix24 JS SDK in Vue applications.

React