nuxt-ui

用途

Nuxt UI v4 是面向 Vue 3 和 Nuxt 4+ 的组件库，构建在 Reka UI（无头组件）、Tailwind CSS v4 与 Tailwind Variants 之上。当前稳定版本为 v4.4.0（2026 年 1 月）。

适用场景包括：安装与配置 @nuxt/ui；使用 UI 组件（Button、Card、Table、Form 等）；自定义主题（颜色、变体、CSS 变量）；构建带校验的表单；使用浮层组件（Modal、Toast、CommandPalette）；使用组合式函数（useToast、useOverlay）。

若涉及 Vue 组件模式，建议使用 vue 技能；若涉及 Nuxt 路由/服务端，建议使用 nuxt 技能。

主要能力

该技能提供按主题划分的参考文件：

• references/installation.md：Nuxt/Vue 安装配置、pnpm 注意事项、UApp 包装组件、模块选项、前缀、tree-shaking。
• references/theming.md：语义化颜色、CSS 变量、app.config.ts、Tailwind Variants。
• references/components.md：按类别划分的组件索引（125+ 组件）。
• components/*.md：单个组件的详细说明（如 button.md、modal.md 等）。
• references/forms.md：表单组件、校验（Zod/Valibot）、useFormField。
• references/overlays.md：Toast、Modal、Slideover、Drawer、CommandPalette。
• references/composables.md：useToast、useOverlay、defineShortcuts、useScrollspy。

使用方式

根据当前任务按需加载参考文件，不要一次性加载全部文件：

• 安装或配置 @nuxt/ui 时加载 references/installation.md。
• 自定义主题、颜色或 Tailwind Variants 时加载 references/theming.md。
• 浏览组件索引或按类别查找组件时加载 references/components.md。
• 构建带校验的表单（Zod/Valibot）时加载 references/forms.md。
• 使用 Toast、Modal、Slideover、Drawer 或 CommandPalette 时加载 references/overlays.md。
• 使用 useToast、useOverlay 等组合式函数时加载 references/composables.md。

快速参考示例：

// 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>

关键概念

• UApp：Toast、Tooltip、浮层所必需的包装组件。
• Tailwind Variants：通过 slots、variants、compoundVariants 实现类型安全的样式。
• 语义化颜色：primary、secondary、success、error、warning、info、neutral。
• Reka UI：无头组件原语（内置无障碍支持）。

如需无头组件原语的 API 细节、无障碍模式、asChild 等，可阅读 reka-ui 技能。

适用场景与限制

适用于 Vue 3 与 Nuxt 4+ 项目中使用 @nuxt/ui v4 组件构建带样式的 UI。Token 效率方面：主技能约 300 tokens，每个子文件约 800-1200 tokens。

关于收费、价格、平台支持范围等具体信息，资料中暂未提供。