@byyuurin/ui

A collection of Vue.js components for my projects.

Preview

https://byyuurin-ui.netlify.app/

Installation

pnpm add @byyuurin/ui unocss

yarn add @byyuurin/ui unocss

npm install @byyuurin/ui unocss

Nuxt

1. Add the UI module in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@byyuurin/ui',
  ],

  ui: {
    prefix: 'U',
    colorMode: true,
    theme: {
      colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error'],
      transitions: true,
      defaultVariants: {
        color: 'primary',
        size: 'md',
      },
    },
  },
})

2. Add UnoCSS preset in your uno.config.ts:

import { createUnoPreset } from '@byyuurin/ui/unocss'
import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  outputToCssLayers: true,
  presets: [
    presetWind4(),
    createUnoPreset({
      colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error'],
    }),
  ],
})

[!NOTE] This preset relies on CSS layers to ensure generated CSS variables can be properly overridden. Make sure outputToCssLayers is enabled.

[!IMPORTANT] The preset colors configuration must be the same as your nuxt configuration

Vue

1. Create ui.config.ts file for unified management of UI settings:

// @unocss-include
import { setup } from '@byyuurin/ui/setup'

export default setup({
  prefix: 'U',
  autoImport: {
    // ... unplugin-auto-import options
  },
  components: {
    // ... unplugin-vue-components options
  },
  colorMode: true,
  theme: {
    colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error'],
    transitions: true,
    defaultVariants: {
      color: 'primary',
      size: 'md',
    },
  },
  ui: {
    colors: {
      primary: 'orange',
      secondary: 'teal',
      success: 'green',
      info: 'blue',
      warning: 'yellow',
      error: 'red',
      neutral: 'stone',
    },
    icons: {
      close: 'i-lucide-x',
      loading: 'i-lucide-loader-circle',
      check: 'i-lucide-check',
      chevronUp: 'i-lucide-chevron-up',
      chevronDown: 'i-lucide-chevron-down',
      chevronLeft: 'i-lucide-chevron-left',
      chevronRight: 'i-lucide-chevron-right',
      chevronDoubleLeft: 'i-lucide-chevrons-left',
      chevronDoubleRight: 'i-lucide-chevrons-right',
      ellipsis: 'i-lucide-ellipsis',
      folder: 'i-lucide-folder',
      folderOpen: 'i-lucide-folder-open',
      plus: 'i-lucide-plus',
      minus: 'i-lucide-minus',
      external: 'i-lucide-arrow-up-right',
    },
  },
})

[!IMPORTANT] Add // @unocss-include to add ui.config.ts to unocss scan files

[!NOTE] Internally relies on custom alias to resolve the theme types. If you're using TypeScript, you should add an alias to your tsconfig to enable auto-completion in your ui.config.ts.

// tsconfig.node.json

{
  "compilerOptions": {
    "paths": {
      "#build/*": ["./node_modules/.nuxt/*"]
    }
  }
}

2. Add the UI Vite plugin in your vite.config.ts:

import ui from '@byyuurin/ui/vite' // <---
import vue from '@vitejs/plugin-vue'
import unocss from 'unocss/vite'
import { defineConfig } from 'vite'
import uiConfig from './ui.config' // <---

export default defineConfig({
  plugins: [
    unocss(),
    vue(),
    ui(uiConfig.vite), // <---
  ],
})

1. Add UnoCSS preset in your uno.config.ts:

import { createUnoPreset } from '@byyuurin/ui/unocss' // <---
import { defineConfig, presetWebFonts, presetWind4 } from 'unocss'
import uiConfig from './ui.config' // <---

export default defineConfig({
  outputToCssLayers: true, // <--
  presets: [
    presetWind4(),
    createUnoPreset(uiConfig.uno), // <---
    presetWebFonts({
      fonts: {
        sans: { provider: 'google', name: 'Public Sans', weights: [400, 500, 600, 700] },
      },
    }),
  ],
})

[!NOTE] This preset relies on CSS layers to ensure generated CSS variables can be properly overridden. Make sure outputToCssLayers is enabled.

4. Add the UI Vue plugin in your src/main.ts

import 'uno.css'

import ui from '@byyuurin/ui/vue-plugin' // <---
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory(),
})

app.use(ui) // <----
app.use(router)

app.mount('#app')

5. Add the isolate class to your root container

<!doctype html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <div id="app" class="isolate"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Credits

• UnoCSS
• @nuxt/ui
• Reka UI
• VueUse

License

MIT License © 2024-PRESENT Yuurin