Onu-Starter

Opinionated OnuUI Starter Template.

Features

🌈 Glass Components - All components follow the glassmorphism style.
🔥 Introduce on demand - Provide resolver to automatically import only used components.
🎉 Ts Supported - Support TypeScript & type checked & type inference.
💡 Cli Build - Easy to create repo with Onu Cli.
🍬 CSS Preset - Has UnoCSS preset package to use, rendered UI easily.
⚙️ Theme Config - Use attribute mode like unocss to desige. Support theme config to customize theme.

Usage

Full Import

npm i onu-ui
npm i unocss -D

Add onu-ui in your main entry file.

// main.ts
import OnuUI from 'onu-ui'
import 'uno.css'
import 'onu-ui/dist/style.css'

createApp(App).use(OnuUI).mount('#app')

Custom UnoCSS config

Custom your UnoCSS config:

// uno.config.ts
import { defineConfig, presetAttributify, presetUno } from 'unocss'
import { presetOnu } from 'onu-ui'

export default defineConfig({
  presets: [
    // ...
    presetUno(),
    presetAttributify(),
    presetOnu(),
  ],
})

On-demand Import:

You need to use an additional plugin to import components you used. First you need to install unplugin-vue-components and unplugin-auto-import.

npm install -D unplugin-vue-components unplugin-auto-import

Then add the code below into your Vite config file.

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { OnuResolver } from 'onu-ui'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [OnuResolver()],
    }),
    Components({
      resolvers: [OnuResolver()],
    }),
  ],
})

Credits

OnuUI

UnoCSS

@nuxt/ui