Onu-UIInstallation
Full Import
bash
npm i onu-ui && npm i unocss -D
npm i onu-ui && npm i unocss -D
Add onu-ui in your main entry file.
ts
// main.ts
import OnuUI from 'onu-ui'
import 'uno.css'
import 'onu-ui/dist/style.css'
createApp(App).use(OnuUI).mount('#app')
// main.ts
import OnuUI from 'onu-ui'
import 'uno.css'
import 'onu-ui/dist/style.css'
createApp(App).use(OnuUI).mount('#app')
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.
shell
npm install -D unplugin-vue-components unplugin-auto-import
npm install -D unplugin-vue-components unplugin-auto-import
Then add the code below into your Vite config file.
ts
// 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()],
}),
],
})
// 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()],
}),
],
})
Custom UnoCSS config
Custom your UnoCSS config:
ts
// uno.config.ts
import { defineConfig, presetAttributify, presetUno } from 'unocss'
import { presetOnu } from 'onu-ui'
export default defineConfig({
presets: [
// ...
presetUno(),
presetAttributify(),
presetOnu(),
],
})
// uno.config.ts
import { defineConfig, presetAttributify, presetUno } from 'unocss'
import { presetOnu } from 'onu-ui'
export default defineConfig({
presets: [
// ...
presetUno(),
presetAttributify(),
presetOnu(),
],
})
Get Volar Typescript support
You can add the OnuUI global component type definition to compilerOptions.types in your project's tsconfig.json. Then volar will help you have a better experience while developing.
json
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["onu-ui/volar"]
}
}
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["onu-ui/volar"]
}
}