⚡

NuxtUIv4前端组件库技能 nuxt-ui-v4

这个技能是用于使用 Nuxt UI v4 组件库进行前端开发，构建响应式、可访问的 Nuxt v4 应用程序。它提供了 125+ 个组件，支持 Tailwind CSS v4、AI 集成、主题定制和 TypeScript，适用于仪表板、AI 聊天界面、页面布局、表单、定价页面等多种场景。关键词：Nuxt UI、前端开发、Vue.js、Tailwind CSS、组件库、AI 集成、主题定制、TypeScript。

前端开发 0 次安装 0 次浏览 更新于 3/7/2026

name: nuxt-ui-v4 description: Nuxt UI v4 组件库，用于构建 Nuxt v4 应用程序。包含 125+ 个可访问组件，支持 Tailwind v4、Reka UI、暗黑模式、主题定制。适用于仪表板、表单、覆盖层、编辑器、页面布局、定价页面，或遇到组件、主题或 TypeScript 错误时使用。 license: MIT allowed-tools: [“Read”, “Write”, “Edit”, “Bash”, “Glob”, “Grep”]

Nuxt UI v4 - 生产级组件库

版本: Nuxt UI v4.2.1 | Nuxt v4.0.0 | 125+ 组件 最后验证: 2025-12-28

一个全面的生产就绪组件库，拥有 125+ 个可访问组件，Tailwind CSS v4，Reka UI 可访问性，以及一流的 AI 集成。

MCP 集成: 此插件包含官方的 Nuxt UI MCP 服务器，用于实时组件数据。

何时使用 / 不使用

使用时: 构建 Nuxt v4 仪表板、AI 聊天界面、落地页、表单、管理面板、定价页面、博客、文档站点，或任何使用 Nuxt UI 组件的 UI

不要使用: 仅 Vue 项目（无 Nuxt）、React 项目、Nuxt 3 或更早版本、Tailwind CSS v3

快速开始

bunx nuxi init my-app && cd my-app
bun add @nuxt/ui

// nuxt.config.ts
export default defineNuxtConfig({ modules: ['@nuxt/ui'] })

<!-- app.vue -->
<template><UApp><NuxtPage /></UApp></template>
<style>
@import "tailwindcss";
@import "@nuxt/ui";
</style>

可用命令: /nuxt-ui-v4:setup, /nuxt-ui:migrate, /nuxt-ui:theme, /nuxt-ui:component

组件类别 (125+ 总计)

仪表板 (11 个组件) - 新

完整的管理界面系统：

  • DashboardGroup - 固定布局包装器，带侧边栏状态管理
  • DashboardSidebar - 可调整大小、可折叠的侧边栏
  • DashboardPanel - 主内容面板，带有页眉/主体/页脚插槽
  • DashboardNavbar - 顶部导航栏
  • DashboardToolbar - 导航栏下的次级工具栏
  • DashboardSearch - 用于仪表板搜索的 CommandPalette
  • DashboardSearchButton - 触发搜索的按钮
  • DashboardSidebarCollapse - 桌面端的折叠按钮
  • DashboardSidebarToggle - 移动端的切换按钮
  • DashboardResizeHandle - 侧边栏/面板的调整大小手柄
<template>
  <UDashboardGroup>
    <UDashboardSidebar>
      <UNavigationMenu :items="menuItems" />
    </UDashboardSidebar>
    <UDashboardPanel>
      <template #header><UDashboardNavbar /></template>
      <template #body><NuxtPage /></template>
    </UDashboardPanel>
  </UDashboardGroup>
</template>

详情: 加载 references/dashboard-components.md 获取完整的仪表板模式

聊天 / AI (5 个组件) - 新

专为 AI 聊天机器人构建，支持 AI SDK v5：

  • ChatMessage - 单个消息，带图标、头像、操作
  • ChatMessages - 消息列表，带自动滚动、状态指示器
  • ChatPalette - 覆盖层内的聊天界面
  • ChatPrompt - 增强的 Textarea，用于 AI 提示
  • ChatPromptSubmit - 提交按钮，带状态处理
<script setup>
import { Chat } from '@ai-sdk/vue'
const chat = new Chat({ api: '/api/chat' })
</script>

<template>
  <UChatMessages :messages="chat.messages" :status="chat.status">
    <template #content="{ message }">{{ message.content }}</template>
  </UChatMessages>
  <UChatPrompt v-model="input" @submit="chat.sendMessage({ text: input })">
    <UChatPromptSubmit :status="chat.status" />
  </UChatPrompt>
</template>

详情: 加载 references/chat-components.md 获取 AI SDK 集成、流式处理、错误处理

编辑器 (6 个组件) - 新

基于 TipTap 的富文本编辑：

  • Editor - TipTap 基础的编辑器，支持 Markdown/HTML/JSON
  • EditorToolbar - 固定、气泡或浮动工具栏
  • EditorDragHandle - 用于重新排序块的拖动手柄
  • EditorMentionMenu - @ 提及建议
  • EditorEmojiMenu - : 表情选择器
  • EditorSuggestionMenu - / 命令菜单
<template>
  <UEditor v-model="content" :extensions="extensions">
    <template #toolbar>
      <UEditorToolbar />
    </template>
  </UEditor>
</template>

详情: 加载 references/editor-components.md 获取 TipTap 设置、扩展、工具栏定制

页面布局 (16 个组件) - 新

落地页和内容布局：

  • Page - 网格布局，带左/右列
  • PageHeader - 响应式页面页眉
  • PageHero - Hero 部分，带标题、描述、CTA
  • PageSection - 内容部分容器
  • PageGrid - 响应式网格系统
  • PageColumns - 多列布局
  • PageFeature - 功能展示组件
  • PageCTA - 行动号召部分
  • PageCard - 预样式卡片，带标题、描述、链接
  • PageList - 垂直列表布局
  • PageLogos - 徽标展示
  • PageAnchors - 锚链接列表
  • PageAside - 粘性侧边栏
  • PageBody - 主内容区域
  • PageLinks - 链接列表
<template>
  <UPage>
    <UPageHero title="欢迎" description="立即开始" :links="heroLinks" />
    <UPageSection>
      <UPageGrid>
        <UPageFeature v-for="f in features" v-bind="f" />
      </UPageGrid>
    </UPageSection>
    <UPageCTA title="准备好了吗？" :links="ctaLinks" />
  </UPage>
</template>

详情: 加载 references/page-layout-components.md 获取落地页模式

内容 (7 个组件) - 新

文档和博客内容：

  • BlogPost - 文章显示组件
  • BlogPosts - 博客网格布局
  • ChangelogVersion - 版本条目显示
  • ChangelogVersions - 变更日志时间线
  • ContentNavigation - 手风琴式导航，用于文档
  • ContentSearch - 文档搜索 CommandPalette
  • ContentSearchButton - 打开搜索的按钮
  • ContentSurround - 上一个/下一个导航
  • ContentToc - 粘性目录
<template>
  <UBlogPosts>
    <UBlogPost v-for="post in posts" v-bind="post" />
  </UBlogPosts>
</template>

详情: 加载 references/content-components.md 获取博客和文档模式

定价 (3 个组件) - 新

SaaS 定价页面：

  • PricingPlan - 单个方案卡片
  • PricingPlans - 响应式方案网格
  • PricingTable - 功能比较表
<template>
  <UPricingPlans>
    <UPricingPlan
      v-for="plan in plans"
      :title="plan.title"
      :price="plan.price"
      :features="plan.features"
    />
  </UPricingPlans>
</template>

详情: 加载 references/pricing-components.md 获取定价页模式

表单 (20 个组件)

Input, InputDate, InputTime, InputNumber, InputTags, InputMenu, Select, SelectMenu, Textarea, Checkbox, CheckboxGroup, RadioGroup, Switch, Slider, Calendar, ColorPicker, PinInput, Form, FormField, FileUpload, AuthForm

<UForm :state="state" :schema="schema" @submit="onSubmit">
  <UFormField name="email" label="邮箱">
    <UInput v-model="state.email" type="email" />
  </UFormField>
  <UButton type="submit">提交</UButton>
</UForm>

详情: 加载 references/form-components-reference.md 获取验证、嵌套表单、文件上传

导航 (8 个组件)

Tabs, Breadcrumb, Link, Pagination, CommandPalette, NavigationMenu, Stepper, Tree

<UTabs v-model="tab" :items="items" />
<UCommandPalette :groups="groups" placeholder="搜索..." />
<UStepper v-model="step" :items="steps" />

详情: 加载 references/navigation-components-reference.md 获取模式

覆盖层 (8 个组件)

Modal, Drawer, Slideover, Dialog, Popover, DropdownMenu, ContextMenu, Tooltip

<UModal v-model="isOpen"><UCard>内容</UCard></UModal>
<UDrawer v-model="isOpen" side="right">...</UDrawer>

详情: 加载 references/overlay-decision-guide.md 获取何时使用每个

反馈 (7 个组件)

Alert, Toast, Progress, Skeleton, Empty, Error, Banner

<UAlert color="warning" title="警告消息" />
<UEmpty icon="i-heroicons-inbox" title="无项目" />
<UBanner title="重要公告" />

详情: 加载 references/feedback-components-reference.md

布局 (6 个组件)

Card, Container, Main, Header, Footer, FooterColumns, Separator

数据 (2 个组件)

Table (带虚拟化), ScrollArea

通用 (15 个组件)

Button, FieldGroup, Avatar, AvatarGroup, Badge, Accordion, Carousel, Chip, Collapsible, Icon, Kbd, Marquee, Timeline, User, App

颜色模式 (6 个组件)

ColorModeAvatar, ColorModeButton, ColorModeImage, ColorModeSelect, ColorModeSwitch, LocaleSelect

组合函数

核心: useToast, useOverlay, useColorMode, useFormField 实用工具: defineShortcuts, defineLocale, extendLocale, extractShortcuts

const { add } = useToast()
add({ title: '成功', color: 'success' })

defineShortcuts({ 'meta_k': () => openSearch() })

详情: 加载 references/composables-guide.md

常见错误 (前 5 个)

1. 缺少 UApp 包装器 → 用 <UApp> 包装应用 2. CSS 导入顺序 → 先 @import "tailwindcss"，然后 @import "@nuxt/ui" 3. 模板引用 (v4.2+) → 使用 ref.value?.focus() 而不是 ref.value.$el.focus() 4. 模块未找到 → 在 nuxt.config.ts 的 modules 中添加 '@nuxt/ui' 5. 暗黑模式不工作 → 在 nuxt.config.ts 中设置 ui: { colorMode: true }

完整列表: 加载 references/COMMON_ERRORS_DETAILED.md 获取 25+ 错误解决方案

何时加载参考

仪表板/管理: dashboard-components.md AI 聊天: chat-components.md, ai-sdk-v5-integration.md 富文本: editor-components.md 落地页: page-layout-components.md 定价/SaaS: pricing-components.md 博客/文档: content-components.md 表单: form-components-reference.md, form-validation-patterns.md 主题定制: semantic-color-system.md, component-theming-guide.md 故障排除: COMMON_ERRORS_DETAILED.md

可用命令

  • /nuxt-ui-v4:setup - 在项目中初始化 Nuxt UI
  • /nuxt-ui:migrate - 从 v2/v3 迁移到 v4
  • /nuxt-ui:theme - 生成主题配置
  • /nuxt-ui:component - 使用 Nuxt UI 模式脚手架组件

可用代理

  • nuxt-ui-component-selector - 推荐最佳组件用于用例
  • nuxt-ui-migration-assistant - 指导 v2/v3 → v4 迁移
  • nuxt-ui-troubleshooter - 诊断并修复常见问题

MCP 集成

此插件包含官方的 Nuxt UI MCP 服务器 (https://ui.nuxt.com/mcp) 提供：

  • 组件列表和元数据
  • 文档访问
  • 迁移指南
  • 模板发现