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

``bash [pnpm]
pnpm add @bitrix24/b24ui-nuxt
`

`bash [yarn]
yarn add @bitrix24/b24ui-nuxt
`

`bash [npm]
npm install @bitrix24/b24ui-nuxt
`

`bash [bun]
yarn add @bitrix24/b24ui-nuxt
`

$3

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

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

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

`css [assets/css/main.css]
@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";
`

Learn more in the installation guide.

$3

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

`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()
]
})
`

2. Use the Bitrix24 UI Vue plugin in your main.ts:

`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')
`

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

`css [assets/main.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