A collection of Vue.js components for my projects.
https://byyuurin-ui.netlify.app/
pnpm i -D unocss @unocss/reset @byyuurin/ui
icons
pnpm i -D @iconify-json/[the-collection-you-want]
// uno.config.ts
import { preset as ui } from '@byyuurin/ui/unocss'
import { defineConfig, presetIcons, presetUno } from 'unocss'
export default defineConfig({
presets: [
presetUno(),
presetIcons({
cdn: 'https://esm.sh/', // OR install @iconify-json/[the-collection-you-want]
}),
ui({
radius: '0rem', // optional
radiusBox: '0rem', // optional
radiusButton: '0rem', // optional
radiusCheckbox: '0rem', // optional
radiusRadio: '0rem', // optional
radiusSwitch: '0rem', // optional
radiusTabs: '0rem', // optional
cb: '#1f2937', // optional
cp: '#1f2937', // optional
cx: '#ffffff', // optional
}),
],
})New Rules
ui-[color]bg-soft-[color]bg-soft-[color]/[mix-ratio]
// vite.config.ts
import UI from '@byyuurin/ui/vite'
import Vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
UnoCSS(),
Vue(),
UI({
prefix: 'U', // optional
autoImport: {
dts: 'src/typed-imports.d.ts',
imports: ['vue'],
},
components: {
dts: 'src/typed-components.d.ts',
},
}),
],
})// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@unocss/nuxt',
'@byyuurin/ui/nuxt',
],
css: [
'@unocss/reset/tailwind.css',
],
ui: {
prefix: 'U', // optional
},
})