Install

npm i onebay-ui -S

or

yarn add onebay-ui

Usage

import { defineComponent } from 'vue'
import { Button } from 'onebay-ui'

export default defineComponent({
  setup() {
    return () => {
      return (
        <Button>Submit</Button>
      )
    }
  }
})

Only import the styles of the components that are used

import { Button } from 'onebay-ui'
import 'onebay-ui/dist/style/button.css'

Using with vite

If your app was created by vite, it is strongly recommended to use the vite plugin vite-plugin-imp in your project, which can automatically import component styles for you on demand.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginImp from 'vite-plugin-imp'

export default defineConfig({
  plugins: [
    vue(),
    vitePluginImp({
      libList: [
        {
          libName: 'onebay-ui',
          style(name) {
            return `onebay-ui/dist/style/${name}.css`
          }
        }
      ]
    })
  ]
})

Checkout the demo on codesandbox

Using with vue-cli

If your app was created by vue-cli, you can use babel-plugin-import as below:

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "import",
      {
        libraryName: "onebay-ui",
        libraryDirectory: "es",
        style: name => {
          return `${name.replace("/es/", "/dist/style/")}.css`;
        }
      }
    ]
  ]
};

import 'onebay-ui/dist/style/index.css'

Custom theme

You need to inject scss variables in your project.

Using with vite












 
 
 
 
 
 
 
 
 
 
 







 







// vite.vonfig.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginImp from 'vite-plugin-imp'

export default defineConfig({
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
    jsxInject: "import { h } from 'vue';"
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          $color-brand: #ffc701;
          $color-brand-light: #ffd541;
          $color-brand-dark: #cc9f01;
        `
      }
    }
  },
  plugins: [
    vue(),
    vitePluginImp({
      libList: [
        {
          libName: 'onebay-ui',
          style(name) {
            return `onebay-ui/src/style/components/${name}.scss`
          }
        }
      ]
    })
  ]
})

Checkout demo in onebay-ui-custom-theme-with-vite

Using with vue-cli

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `
          $color-brand: #ffc701;
          $color-brand-light: #ffd541;
          $color-brand-dark: #cc9f01;
        `
      }
    }
  }
}

Checkout demo in onebay-ui-custom-theme-with-vue-cli