Getting Started

BigIn UI is a Vue 3 component library, it's based on Element Plus. Because we need customizing many thing to fit our design system, so the source code is no longer compatible with the origin one. We respect and really appreciate the hard work of Element Plus's team.

BigIn UI is also under MIT license, that mean you can freely using and customizing it.

Warm regards!

😃 🤝 🎉

Version 🚀

Installation

We are recommended using pnpm for better experience

pnpm add bigin-ui

yarn add bigin-ui

npm install bigin-ui

Nuxt

Attention

This version only compatible with Nuxt v3. For v2, please refer to our previous version

Using template

For a new application, we provide a starter template for quick bootstraping quickly

pnpm dlx nuxi init -t gh:bigin-ui/nuxt#v3 <APP_NAME>

npx nuxi init -t gh:bigin-ui/nuxt#v3 <APP_NAME>

Add manually

Or your can add bigin-ui to your existing application as below

Create a custom theme (optional)

If you need to custom branding color or anything else, define them as below example.

// assets/scss/var.scss
@forward 'bigin-ui/theme-chalk/src/common/var' with (
  $colors: (
    'primary': (
      'base': #ff6800,
      '1': #ffc9a3,
      '2': #ff9852,
      '3': #ff6800,
      '4': #c24f00,
      '5': #853600,
    ),
  )
);

@use 'bigin-ui/theme-chalk/src/var.scss' as *;

// assets/scss/dark-var.scss
@forward 'bigin-ui/theme-chalk/src/dark/var' with (
  $colors: (
    'primary': (
      'base': #ff6800,
      '5': #ffc9a3,
      '4': #ff9852,
      '3': #ff6800,
      '2': #c24f00,
      '1': #853600,
    ),
  )
);

@use 'bigin-ui/theme-chalk/src/dark/css-vars.scss' as *;

// assets/scss/app.scss
@use 'var.scss' as *;
@use 'dark-var.scss' as *;
@use 'bigin-ui/theme-chalk/src/reset.scss' as *;
@use 'bigin-ui/theme-chalk/src/components.scss' as *;

Update config file

Register app.scss to css section and add bigin-ui to components section

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  // ...
  // Use default theme
  // css: ['bigin-ui/dist/index.css'],
  // Use custom theme
  css: ['assets/scss/app.scss'],
  modules: ["bigin-ui/es/nuxt"],
  // ...
})

Vue

Full import

If you don’t care about the bundle size so much, it’s more convenient to use full import.

// main.ts
import { createApp } from 'vue'
import BiginUI from 'bigin-ui'
import 'bigin-ui/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(BiginUI)
app.config.compilerOptions.isCustomElement = (tag) => ['lottie-player'].includes(tag)
app.mount('#app')

On demand import

You need to use an additional plugin to import components you used.

pnpm add -D unplugin-vue-components unplugin-auto-import @bigin/unplugin-vue-components

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { BiginUiResolver } from '@bigin/unplugin-vue-components/resolvers'

export default defineConfig(async ({ mode }) => {
  // ...
  plugins: [
    AutoImport({
      resolvers: [BiginUiResolver()],
    }),
    Components({
      resolvers: [BiginUiResolver()],
    }),
  ]
  // ...
}

Internationalization

BDSv3 components are using English by default, if you wish you use other languages, config as below.

Globally

// plugins/bigin-ui.ts
import { defineNuxtPlugin } from 'nuxt'
import BiginUI from 'bigin-ui'
import viVN from 'bigin-ui/es/locale/lang/vi-vn'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(BiginUI, {
    locale: viVN,
  })
})

Using config provider

// app.vue
<template>
  <div>
    <BConfigProvider :locale="viVN">
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </BConfigProvider>
  </div>
</template>

<script setup lang="ts">
  import viVN from 'bigin-ui/lib/locale/lang/vi-vn'
</script>

Volar support

If you use volar, please add the global component type definition to compilerOptions.types in tsconfig.json.

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["bigin-ui/global"]
  }
}

Next step

You can bootstrap your project from now on. For each components usage, please refer to the individual component documentation.