nuxt-ui-v4 by secondsky/claude-skills
npx skills add https://github.com/secondsky/claude-skills --skill 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,
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
/nuxt-ui:component完整的管理界面系统:
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 聊天机器人构建,支持 AI SDK v5:
ChatMessage - 带有图标、头像、操作的单个消息
ChatMessages - 具有自动滚动、状态指示器的消息列表
ChatPalette - 覆盖层内的聊天界面
ChatPrompt - 用于 AI 提示的增强型 Textarea
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 集成、流式传输、错误处理
使用 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 设置、扩展、工具栏自定义
落地页和内容布局:
Page - 具有左/右列的网格布局
PageHeader - 响应式页面页眉
PageHero - 带有标题、描述、行动号召的英雄区域
PageSection - 内容区域容器
PageGrid - 响应式网格系统
PageColumns - 多列布局
PageFeature - 功能展示组件
PageCTA - 行动号召区域
PageCard - 预样式卡片,带有标题、描述、链接
PageList - 垂直列表布局
PageLogos - Logo 展示
PageAnchors - 锚点链接列表
PageAside - 粘性侧边栏
PageBody - 主内容区域
PageLinks - 链接列表
<template> <UPage> <UPageHero title="Welcome" description="Get started today" :links="heroLinks" /> <UPageSection> <UPageGrid> <UPageFeature v-for="f in features" v-bind="f" /> </UPageGrid> </UPageSection> <UPageCTA title="Ready?" :links="ctaLinks" /> </UPage> </template>详细信息 : 加载 references/page-layout-components.md 以获取落地页模式
文档和博客内容:
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 以获取博客和文档模式
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 以获取定价页面模式
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="Email">
<UInput v-model="state.email" type="email" />
</UFormField>
<UButton type="submit">Submit</UButton>
</UForm>
详细信息 : 加载 references/form-components-reference.md 以获取验证、嵌套表单、文件上传
Tabs, Breadcrumb, Link, Pagination, CommandPalette, NavigationMenu, Stepper, Tree
<UTabs v-model="tab" :items="items" />
<UCommandPalette :groups="groups" placeholder="Search..." />
<UStepper v-model="step" :items="steps" />
详细信息 : 加载 references/navigation-components-reference.md 以获取模式
Modal, Drawer, Slideover, Dialog, Popover, DropdownMenu, ContextMenu, Tooltip
<UModal v-model="isOpen"><UCard>Content</UCard></UModal>
<UDrawer v-model="isOpen" side="right">...</UDrawer>
详细信息 : 加载 references/overlay-decision-guide.md 以了解何时使用每种组件
Alert, Toast, Progress, Skeleton, Empty, Error, Banner
<UAlert color="warning" title="Warning message" />
<UEmpty icon="i-heroicons-inbox" title="No items" />
<UBanner title="Important announcement" />
详细信息 : 加载 references/feedback-components-reference.md
Card, Container, Main, Header, Footer, FooterColumns, Separator
Table (带虚拟化), ScrollArea
Button, FieldGroup, Avatar, AvatarGroup, Badge, Accordion, Carousel, Chip, Collapsible, Icon, Kbd, Marquee, Timeline, User, App
ColorModeAvatar, ColorModeButton, ColorModeImage, ColorModeSelect, ColorModeSwitch, LocaleSelect
核心 : useToast, useOverlay, useColorMode, useFormField 工具 : defineShortcuts, defineLocale, extendLocale, extractShortcuts
const { add } = useToast()
add({ title: 'Success', color: 'success' })
defineShortcuts({ 'meta_k': () => openSearch() })
详细信息 : 加载 references/composables-guide.md
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 MCP 服务器 (https://ui.nuxt.com/mcp),提供:
每周安装数
82
代码仓库
GitHub 星标数
93
首次出现
Jan 25, 2026
安全审计
安装于
claude-code70
gemini-cli67
cursor66
codex65
opencode64
github-copilot63
Version : Nuxt UI v4.2.1 | Nuxt v4.0.0 | 125+ Components Last Verified : 2025-12-28
A comprehensive production-ready component library with 125+ accessible components, Tailwind CSS v4, Reka UI accessibility, and first-class AI integration.
MCP Integration : This plugin includes the official Nuxt UI MCP server for live component data.
Use when : Building Nuxt v4 dashboards, AI chat interfaces, landing pages, forms, admin panels, pricing pages, blogs, documentation sites, or any UI with Nuxt UI components
DON'T use : Vue-only projects (no Nuxt), React projects, Nuxt 3 or earlier, 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>
Commands available : /nuxt-ui-v4:setup, /nuxt-ui:migrate, /nuxt-ui:theme, /nuxt-ui:component
Complete admin interface system:
DashboardGroup - Fixed layout wrapper with sidebar state management
DashboardSidebar - Resizable, collapsible sidebar
DashboardPanel - Main content panel with header/body/footer slots
DashboardNavbar - Top navigation bar
DashboardToolbar - Secondary toolbar under navbar
DashboardSearch - CommandPalette for dashboard search
DashboardSearchButton - Button to trigger search
DashboardSidebarCollapse - Collapse button for desktop
DashboardSidebarToggle - Toggle button for mobile
DashboardResizeHandle - Resize handle for sidebar/panels
<template> <UDashboardGroup> <UDashboardSidebar> <UNavigationMenu :items="menuItems" /> </UDashboardSidebar> <UDashboardPanel> <template #header><UDashboardNavbar /></template> <template #body><NuxtPage /></template> </UDashboardPanel> </UDashboardGroup> </template>Details : Load references/dashboard-components.md for complete dashboard patterns
Purpose-built for AI chatbots with AI SDK v5:
ChatMessage - Single message with icon, avatar, actions
ChatMessages - Message list with auto-scroll, status indicator
ChatPalette - Chat interface inside an overlay
ChatPrompt - Enhanced Textarea for AI prompts
ChatPromptSubmit - Submit button with status handling
<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>Details : Load references/chat-components.md for AI SDK integration, streaming, error handling
Rich text editing with TipTap:
Editor - TipTap-based editor with markdown/HTML/JSON support
EditorToolbar - Fixed, bubble, or floating toolbar
EditorDragHandle - Drag handle for reordering blocks
EditorMentionMenu - @ mention suggestions
EditorEmojiMenu - : emoji picker
EditorSuggestionMenu - / command menu
<template> <UEditor v-model="content" :extensions="extensions"> <template #toolbar> <UEditorToolbar /> </template> </UEditor> </template>Details : Load references/editor-components.md for TipTap setup, extensions, toolbar customization
Landing pages and content layouts:
Page - Grid layout with left/right columns
PageHeader - Responsive page header
PageHero - Hero section with title, description, CTAs
PageSection - Content section container
PageGrid - Responsive grid system
PageColumns - Multi-column layout
PageFeature - Feature showcase component
PageCTA - Call-to-action section
PageCard - Pre-styled card with title, description, link
PageList - Vertical list layout
PageLogos - Logo showcase
PageAnchors - Anchor link list
PageAside - Sticky sidebar
PageBody - Main content area
PageLinks - Link list
<template> <UPage> <UPageHero title="Welcome" description="Get started today" :links="heroLinks" /> <UPageSection> <UPageGrid> <UPageFeature v-for="f in features" v-bind="f" /> </UPageGrid> </UPageSection> <UPageCTA title="Ready?" :links="ctaLinks" /> </UPage> </template>Details : Load references/page-layout-components.md for landing page patterns
Documentation and blog content:
BlogPost - Article display component
BlogPosts - Blog grid layout
ChangelogVersion - Version entry display
ChangelogVersions - Changelog timeline
ContentNavigation - Accordion-style nav for docs
ContentSearch - Documentation search CommandPalette
ContentSearchButton - Button to open search
ContentSurround - Prev/next navigation
ContentToc - Sticky table of contents
<template> <UBlogPosts> <UBlogPost v-for="post in posts" v-bind="post" /> </UBlogPosts> </template>Details : Load references/content-components.md for blog and documentation patterns
SaaS pricing pages:
PricingPlan - Individual plan card
PricingPlans - Responsive plan grid
PricingTable - Feature comparison table
<template> <UPricingPlans> <UPricingPlan v-for="plan in plans" :title="plan.title" :price="plan.price" :features="plan.features" /> </UPricingPlans> </template>Details : Load references/pricing-components.md for pricing page patterns
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="Email">
<UInput v-model="state.email" type="email" />
</UFormField>
<UButton type="submit">Submit</UButton>
</UForm>
Details : Load references/form-components-reference.md for validation, nested forms, file uploads
Tabs, Breadcrumb, Link, Pagination, CommandPalette, NavigationMenu, Stepper, Tree
<UTabs v-model="tab" :items="items" />
<UCommandPalette :groups="groups" placeholder="Search..." />
<UStepper v-model="step" :items="steps" />
Details : Load references/navigation-components-reference.md for patterns
Modal, Drawer, Slideover, Dialog, Popover, DropdownMenu, ContextMenu, Tooltip
<UModal v-model="isOpen"><UCard>Content</UCard></UModal>
<UDrawer v-model="isOpen" side="right">...</UDrawer>
Details : Load references/overlay-decision-guide.md for when to use each
Alert, Toast, Progress, Skeleton, Empty, Error, Banner
<UAlert color="warning" title="Warning message" />
<UEmpty icon="i-heroicons-inbox" title="No items" />
<UBanner title="Important announcement" />
Details : Load references/feedback-components-reference.md
Card, Container, Main, Header, Footer, FooterColumns, Separator
Table (with virtualization), ScrollArea
Button, FieldGroup, Avatar, AvatarGroup, Badge, Accordion, Carousel, Chip, Collapsible, Icon, Kbd, Marquee, Timeline, User, App
ColorModeAvatar, ColorModeButton, ColorModeImage, ColorModeSelect, ColorModeSwitch, LocaleSelect
Core : useToast, useOverlay, useColorMode, useFormField Utilities : defineShortcuts, defineLocale, extendLocale, extractShortcuts
const { add } = useToast()
add({ title: 'Success', color: 'success' })
defineShortcuts({ 'meta_k': () => openSearch() })
Details : Load references/composables-guide.md
1. Missing UApp Wrapper → Wrap app with <UApp> 2. CSS Import Order → @import "tailwindcss" FIRST, then @import "@nuxt/ui" 3. Template Refs (v4.2+) → Use ref.value?.focus() not ref.value.$el.focus() 4. Module Not Found → Add '@nuxt/ui' to modules in nuxt.config.ts 5. Dark Mode Not Working → Set ui: { colorMode: true } in nuxt.config.ts
Full list : Load references/COMMON_ERRORS_DETAILED.md for 25+ error solutions
Dashboard/Admin : dashboard-components.md AI Chat : chat-components.md, ai-sdk-v5-integration.md Rich Text : editor-components.md Landing Pages : page-layout-components.md Pricing/SaaS : pricing-components.md Blog/Docs : content-components.md Forms : form-components-reference.md, form-validation-patterns.md : , :
/nuxt-ui-v4:setup - Initialize Nuxt UI in project/nuxt-ui:migrate - Migrate from v2/v3 to v4/nuxt-ui:theme - Generate theme configuration/nuxt-ui:component - Scaffold component with Nuxt UI patternsThis plugin includes the official Nuxt UI MCP server (https://ui.nuxt.com/mcp) providing:
Weekly Installs
82
Repository
GitHub Stars
93
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
claude-code70
gemini-cli67
cursor66
codex65
opencode64
github-copilot63
前端开发AI工具 | 5大专业能力构建生产级前端页面 | 设计工程与动效系统
699 周安装
semantic-color-system.mdcomponent-theming-guide.mdCOMMON_ERRORS_DETAILED.md