SuperAPI AI 工具集

nuxt-ui-v4

通用与其它

查看项目

更新于 10-15 21:05

技能介绍

用途:Nuxt UI v4 是用于构建 Nuxt v4 应用的生产级组件库,含 125+ 无障碍组件,基于 Tailwind CSS v4 与 Reka UI,支持暗色模式与主题定制,并可与纯 Vue 应用(Vite、Inertia、SSR)配合使用。

主要能力:组件覆盖仪表盘(DashboardGroup、DashboardSidebar、DashboardPanel 等 10 个)、AI 聊天(ChatMessage、ChatMessages、ChatPrompt、ChatReasoning、ChatTool、ChatShimmer 等 8 个,配合 AI SDK v5)、富文本编辑器(基于 TipTap 的 Editor、EditorToolbar 等 6 个)、页面布局(Page、PageHero、PageSection、PageGrid 等 16 个)、内容(BlogPost、ChangelogVersion、ContentNavigation、ContentToc 等)、定价(PricingPlan、PricingPlans、PricingTable)、表单(22 个)、导航、浮层、反馈、布局、数据表格、通用组件与颜色模式组件。另提供 useToast、useOverlay、useFormField、defineShortcuts 等组合式函数及 AI 工具函数。

使用方式:安装命令为 bunx nuxi init my-app && cd my-app 与 bun add @nuxt/ui tailwindcss;在 nuxt.config.ts 的 modules 中加入 '@nuxt/ui',并在 CSS 中先 @import "tailwindcss" 再 @import "@nuxt/ui",应用需用 <UApp> 包裹。也可用模板创建:npm create nuxt@latest -- -t ui(另有 ui/dashboard、ui/chat、ui/landing、ui/saas、ui/docs 等)。插件提供 /nuxt-ui-v4:setup、/nuxt-ui:migrate、/nuxt-ui:theme、/nuxt-ui:component 命令,以及组件选择、迁移、排错代理,并内置官方 Nuxt UI MCP 服务器。

适用场景:Nuxt v4 仪表盘、AI 聊天界面、落地页、表单、管理后台、定价页、博客与文档站点。

限制:不适用于 React 项目、Nuxt 3 及更早版本、Tailwind CSS v3;纯 Vue 项目需通过 Vite 插件支持。资料建议安装前进行供应链安全核查,如禁用安装脚本、等待冷却期、使用 socket 审计。常见错误包括缺少 UApp 包裹、CSS 导入顺序错误、缺少 tailwindcss 包、未注册模块、AI SDK v5 中 useChat 已改为 Chat 类。具体收费与价格信息暂未提供。