Installation in Nuxt Application

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

Nuxt UI

Setup

Use our Nuxt Starter

Start your project using the bitrix24/starter-b24ui 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 <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 Nuxt 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 in your project's root directory.

2. Add the Bitrix24 UI module in your nuxt.config.ts

nuxt.config.ts

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

3. Import Tailwind CSS and Bitrix24 UI in your CSS

assets/css/main.css

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

TIP

Use the css property in your nuxt.config.ts to import your CSS file.

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@bitrix24/b24ui-nuxt'],
  css: ['~/assets/css/main.css']
})

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

4. Wrap your app with App component

app.vue

<template>
  <B24App>
    <NuxtPage />
  </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 nuxt.config.ts.

colorMode

Use the colorMode option to enable or disable the @nuxt/color-mode module.

• Default: true

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@bitrix24/b24ui-nuxt'],
  b24ui: {
    colorMode: false
  }
})