UG666

UG666 UI

Vue 3 · TypeScript · Astro Islands

@ug666/vue

一个面向业务项目的 Vue 3 UI 组件库,覆盖按钮、表单、反馈、导航与布局等高频场景。当前文档区基于 Astro + Vue 岛屿模式构建,所有示例均直接使用真实组件渲染。

37

组件文档

9

Composables

100%

暗色模式覆盖

① 安装

@ug666/utils 会作为依赖自动装入。

bun add @ug666/vue

② 引入主题样式(必须)

在项目入口(如 main.ts)引入一次;未引入时组件颜色不会生效。切换暗色模式给 <html>class="dark" 即可。

import '@ug666/vue/tokens.css'

快速开始

使用 Composition API 直接组合组件与 composables,快速构建业务页面。

import { ref } from 'vue'
import { UButton, UCard, UCardContent, UCardHeader, UCardTitle, useToggle } from '@ug666/vue'

const { value: visible, toggle } = useToggle(true)
const count = ref(0)

Vue 组件特性

围绕 Vue 3 组合式开发体验设计,兼顾业务效率与演示一致性。

真实组件渲染

所有页面中的预览均使用 @ug666/vue 真实组件,不是静态截图。

Astro 岛屿模式

内容页由 Astro 输出,交互区由 Vue 组件按需挂载。

组合式函数配套

内置防抖、分页、复制、表单与通知等高频 composables。

Props 说明完整

每个组件页都附带属性表格、导入方式与代码示例。

暗色模式兼容

所有新建页面与 demo 均内置 dark: 样式支持。

文档路径隔离

Vue 文档位于 /vue/*,与 React 文档路径完全分离。

浏览 24 个组件 查看 9 个 Composables