Installation

Adding library

1. Add bragi-vue and its supporting libraries

   # pnpm
   pnpm add bragi-vue && pnpm add -D unocss
   
   # npm
   npm install bragi-vue && npm install -D unocss

Usage

1. Add UnoCSS to vite.config.js

   import Unocss from 'unocss/vite'
   
   export default {
     plugins: [
       Unocss(),
     ],
   }

2. Create UnoCSS Config file uno.config.js in root of the project with below content:

   import { presetCore, presetThemeDefault } from 'bragi-vue'
   import {
     defineConfig,
     presetIcons,
     presetUno,
   } from 'unocss'
   
   export default defineConfig({
     presets: [
       presetUno(),
       presetIcons({
         scale: 1.2,
         extraProperties: {
           height: '1.5em',
           'flex-shrink': '0',
           'display': 'inline-block',
         },
       }),
   
       // bragi-vue presets
       presetCore(),
       presetThemeDefault(),
     ],
     include: [/.*\/bragi-vue\.js(.*)?$/, './**/*.vue', './**/*.md'],
   })

3. Update your main.js file like below:

   import { createApp } from 'vue'
   import App from './App.vue'
   import { bragi } from 'bragi-vue'
   
   // UnoCSS import
   import 'uno.css'
   
   // import styles
   import 'bragi-vue/dist/style.css'
   
   // Using `app.use(bragi)` will register all the components globally
   createApp(App)
     .use(bragi)
     .mount('#app')

It's done! 🥳

Now, Just refer to the component in your vue files:

<template>
  <BBtn>Button</BBtn>
</template>

---

Auto importing components w/ Tree shaking

unplugin-vue-components lets you auto import components on demand. With this you can omit import statement and still get benefits of tree shaking.

1. Remove bragi plugin use in main.js file if you haven't

   -  import { bragi } from 'bragi-vue'
   
     createApp(App)
   -   .use(bragi)
       .mount('#app')

2. Install unplugin-vue-components:

   # pnpm
   pnpm add -D unplugin-vue-components
   
   # npm
   npm i -D unplugin-vue-components

3. Add following in vite.config.js:

   // other imports
   import Components from 'unplugin-vue-components/vite'
   import { BragiComponentResolver } from 'bragi-vue'
   
   export default defineConfig({
     plugins: [
       // other plugins
       Components({
         resolvers: [
           BragiComponentResolver()
         ]
       }),
     ],
   
     // other config
   })

4. Now, just use components the component and it will be auto imported on demand 🤯

   <template>
     <BBtn>Primary</BBtn>
   </template>