@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