OnebayUI (A mobile web UI library write by vue3)

What is OnebayUI?

OnebayUI is a mobile web UI library written with vue3, it can help you write vue3 applications quickly and easily.
All components are written with tsx.
All Components demo in this document are written by vue template and tsx.

Features

• Support Tree shaking
• Support Custom theme
• Support SSR

Demo

Scan the onebay QR code to view the demo on your mobile phone.

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>
      )
    }
  }
})

Import component style (Recommended)

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 all components styles (Not recommended)

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