SuperAPI AI 工具集

nuxt-ui

前端与建站

查看项目

更新于 10-16 02:33

技能介绍

用途:用于在 Vue 3 与 Nuxt 4+ 项目中构建带样式的 UI,使用 @nuxt/ui v4 组件(Button、Card、Table、Form 等),并进行主题定制、表单校验与浮层交互。当前稳定版本为 v4.3.0(2025 年 12 月)。

主要能力:基于 Reka UI(无头组件,内置无障碍)+ Tailwind CSS v4 + Tailwind Variants;提供语义颜色(primary、secondary、success、error、warning、info、neutral)、CSS 变量与 app.config.ts 主题配置;组件索引覆盖 125+ 组件;表单支持 Zod/Valibot 校验与 useFormField;浮层包含 Toast、Modal、Slideover、Drawer、CommandPalette;组合式函数含 useToast、useOverlay、defineShortcuts、useScrollspy。

使用方式:在 nuxt.config.ts 中注册模块并引入 CSS。示例: // nuxt.config.ts export default defineNuxtConfig({ modules: ['@nuxt/ui'], css: ['~/assets/css/main.css'] })

/* assets/css/main.css */ @import 'tailwindcss'; @import '@nuxt/ui';

<!-- app.vue - UApp wrapper required --> <template> <UApp> <NuxtPage /> </UApp> </template>

参考文件按上下文加载:安装配置看 references/installation.md(含 Nuxt/Vue 设置、pnpm 注意事项、UApp 包装、模块选项、前缀、tree-shaking);主题看 references/theming.md;组件总览看 references/components.md;单个组件看 components/*.md;表单看 references/forms.md;浮层看 references/overlays.md;组合式函数看 references/composables.md。不要一次读取全部文件。

适用场景:需要快速搭建风格统一的 Vue/Nuxt 界面、主题定制、表单校验、弹窗与通知等交互。

限制:UApp 是 Toast、Tooltip、浮层所需的外层包装组件;Vue 组件模式与 Nuxt 路由/服务端另有独立技能;无头组件原语(API 细节、无障碍模式、asChild)需参考 reka-ui 技能。其他如收费与平台等资料暂未提供。