Bitrix24 UI

Bitrix24 UI for developing web applications REST API for NUXT & VUE

Find more details in the documentation

Documentation

Visit https://bitrix24.github.io/b24ui/ to explore the documentation.

Installation

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

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

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

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

Nuxt

1. Add the Bitrix24 UI module in your nuxt.config.ts:

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

2. Import Tailwind CSS and Bitrix24 UI in your CSS:

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

Learn more in the installation guide.

Vue

1. Add the Bitrix24 UI Vite plugin in your 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()
  ]
})

2. Use the Bitrix24 UI Vue plugin in your 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')

3. Import Tailwind CSS and Bitrix24 UI in your CSS:

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

Learn more in the installation guide.

Credits

• nuxt/nuxt
• nuxt/ui
• unovue/reka-ui
• tailwindlabs/tailwindcss
• vueuse/vueuse