Installation in Vue Application

Learn how to install and configure Bitrix24 UI `@bitrix24/b24ui-nuxt` in your Vue application.

Nuxt UI

Setup

Use our Vue starter

Start your project using the bitrix24/starter-b24ui-vue template with Bitrix24 UI pre-configured.

Create a new project locally by running the following command:

Terminal

npx nuxi init -t github:bitrix24/starter-b24ui-vue <my-app>

TIP

The <my-app> argument is the name of the directory where the project will be created, replace it with your project name.

Once the installation is complete, navigate into your project and start the development server:

Terminal

cd <my-app>
npm run dev

Add to a Vue project

1. Install @bitrix24/b24ui and @bitrix24/b24icons-vue packages

pnpm

pnpm add @bitrix24/b24ui-nuxt
pnpm add @bitrix24/b24icons-vue

yarn

yarn add @bitrix24/b24ui-nuxt
yarn add @bitrix24/b24icons-vue

npm

npm install @bitrix24/b24ui-nuxt
npm install @bitrix24/b24icons-vue

bun

bun add @bitrix24/b24ui-nuxt
bun add @bitrix24/b24icons-vue

WARNING

If you're using pnpm, ensure that you either set shamefully-hoist=true in your .npmrc file or install tailwindcss, vue-router and @unhead/vue in your project's root directory.

2. Add the Bitrix24 UI Vite plugin in your vite.config.ts

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite()
  ]
})

INFO

Bitrix24 UI registers unplugin-auto-import and unplugin-vue-components, which will generate auto-imports.d.ts and components.d.ts type declaration files. You will likely want to gitignore these, and add them to your tsconfig.

tsconfig.app.json

{
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "auto-imports.d.ts",
    "components.d.ts"
  ]
}

.gitignore

# Auto-generated type declarations
auto-imports.d.ts
components.d.ts

3. Use the Bitrix24 UI Vue plugin in your main.ts

main.ts

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import b24UiPlugin from '@bitrix24/b24ui-nuxt/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(b24UiPlugin)

app.mount('#app')

4. Import Tailwind CSS and Bitrix24 UI in your CSS

@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

TIP

Import the CSS file in your main.ts.

main.ts

import './assets/main.css'

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import b24UiPlugin from '@bitrix24/b24ui-nuxt/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(b24UiPlugin)

app.mount('#app')

INFO

It's recommended to install the Tailwind CSS IntelliSense extension for VSCode and add the following settings:

.vscode/settings.json

"files.associations": {
  "*.css": "tailwindcss"
},
"editor.quickSuggestions": {
  "strings": "on"
}

5. Wrap your app with App component

App.vue

<template>
  <B24App>
    <RouterView />
  </B24App>
</template>

TIP

The App component provides global configurations and is required for Toast and Tooltip components to work.

Options

You can customize Bitrix24 UI by providing options in your vite.config.ts.

colorMode

Use the colorMode option to enable or disable the color mode integration from @vueuse/core.

• Default: true

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      colorMode: false
    })
  ]
})