Onu UIInstallation
This section explains how to properly install and use an Onu UI.
Full Import
bash
pnpm add onu-ui && pnpm add -D unocsspnpm add onu-ui && pnpm add -D unocssbash
yarn add onu-ui && yarn add -D unocssyarn add onu-ui && yarn add -D unocssbash
npm install onu-ui && npm install unocss -Dnpm install onu-ui && npm install unocss -DAdd 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.
bash
pnpm add -D unplugin-vue-components unplugin-auto-importpnpm add -D unplugin-vue-components unplugin-auto-importbash
yarn add -D unplugin-vue-components unplugin-auto-importyarn add -D unplugin-vue-components unplugin-auto-importbash
npm install -D unplugin-vue-components unplugin-auto-importnpm install -D unplugin-vue-components unplugin-auto-importThen 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. 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"]
}
}Using modules in Nuxt
Add @onu-ui/nuxt dependency to your project
bash
pnpm i @onu-ui/nuxt -Dpnpm i @onu-ui/nuxt -DAdd @onu-ui/nuxt to the modules section of nuxt.config.ts
typescript
{
export default defineNuxtConfig({
// ...
modules: [
// ...
'@onu-ui/nuxt'
],
// ...
css: [
// ...
'onu-ui/dist/style.css'
]
})
}{
export default defineNuxtConfig({
// ...
modules: [
// ...
'@onu-ui/nuxt'
],
// ...
css: [
// ...
'onu-ui/dist/style.css'
]
})
}