v4.6.0
✨ 亮点
📁 新的 Sidebar 组件
该Sidebar组件提供了一个响应式的应用侧边栏，在桌面端保持固定，并在移动端转换为 Modal（模态框）、Slideover（侧滑窗）或 Drawer（抽屉）。它支持三种视觉变体（sidebar, floating, inset）和三种折叠模式（offcanvas, icon, none）
<template>
<USidebar v-model:open="open" collapsible="icon">
<template #header>
<Logo />
</template>
<UNavigationMenu :items="items" />
<template #footer>
<UserMenu />
</template>
</USidebar>
</template>
🤖 新的 Chat 组件
我们引入了 3 个新组件，用于构建更丰富的 AI 聊天界面
- ChatReasoning：一个可折叠的思考/推理块，可自动跟踪流式传输持续时间。
- ChatTool：一个用于工具调用的可折叠行，包含加载和流式传输状态。
- ChatShimmer：一个动画文本基础组件，在流式传输期间被 ChatReasoning 和 ChatTool 内部使用。
这些组件与AI SDK消息部分无缝集成
<template>
<UChatMessages :messages="messages" :status="status">
<template #content="{ message }">
<template v-for="(part, index) in message.parts" :key="index">
<UChatReasoning
v-if="isReasoningUIPart(part)"
:text="part.reasoning"
:streaming="isReasoningStreaming(message, index, chat)"
/>
<UChatTool
v-else-if="isToolInvocationUIPart(part)"
:text="part.toolInvocation.toolName"
:streaming="isToolStreaming(part)"
/>
<MDC v-else-if="isTextUIPart(part)" :value="part.text" />
</template>
</template>
</UChatMessages>
</template>
🚨 重大变更
- module：使用
moduleDependencies来操作选项 (#5384)
此版本采用了 Nuxt 新的 moduleDependencies API，用于声明式管理子模块依赖（@nuxt/icon, @nuxt/fonts, @nuxtjs/color-mode, @nuxtjs/mdc），而不是在运行时手动安装它们。这需要 Nuxt >= 4.1.0。
🚀 新功能
- 添加独立的 Vue REPL 演练场 (#6209) (390c4bd)
- ChatMessage：添加
files插槽 (12d6020) - ChatReasoning：新组件 (#6175) (6db594e)
- ChatShimmer：新组件 (#6171) (8db9c54)
- ChatTool：新组件 (#6176) (7849534)
- Checkbox/Switch：增加对
trueValue/falseValue属性的支持 (#6150) (91c6356) - ContentToc：添加
highlight-variant属性 (#5746) (df080ce) - DropdownMenu：添加
filter属性 (#6153) (a529b43) - FileUpload：添加
fileImage属性 (#5935) (40f9c2e) - Icon：在仅 Vue 端添加全局选项 (#5354) (566fbee)
- InputMenu：添加
autocomplete属性 (#6026) (ee8a248) - InputTime：添加
range属性 (#6203) (c124f29) - module：使用
moduleDependencies来操作选项 (#5384) (dd3f5c5) - Sidebar：新组件 (#6038) (51a1f85)
- Table：实现行锁定 (#6115) (fbd60d9)
- Tooltip：通过 App tooltip 属性支持全局内容配置 (#6152) (83afd9c)
- unplugin：增加对 prose 组件的支持 (#6198) (c58b9b2)
🐛 Bug 修复
- Avatar：使用解析后的尺寸作为图像宽高 (#6008) (6dd0fc4)
- ContentNavigation：防止切换已禁用的父级项 (#6122) (0f1074f)
- ContentSurround：处理 RTL 模式 (#6148) (6921f13)
- ContentToc：在 lg 断点重置起始边距 (8f24f79)
- DashboardSearchButton：为 trailing 插槽使用有效的 HTML 结构 (#6194) (578a12f)
- Editor：保护不可用的列表扩展的
lift调用 (#6100) (065db6b) - Error：支持
status和statusText属性 (1350d62), 关闭#6134 - FileUpload：使 multiple、accept 和 reset 选项具有响应式 (#6204) (ae093df)
- Modal/Slideover/Popover/Drawer：防止双重
close:prevent发射 (#6226) (9a0d501) - module：仅自动导入公共可组合项，并允许 Vite 选择退出 (#6197) (886f5fb)
- NavigationMenu：改进视口和指示器的 RTL 支持 (#6164) (755867b)
- NavigationMenu：在垂直方向传播禁用状态到项 (6d4d651)
- ProsePre：将 shiki 行高亮样式移至主题 (d663950)
🌐 本地化
👋 新贡献者
- @leonardocustodio 完成了他们的首次贡献https://github.com/nuxt/ui/pull/6125
- @SveinnB 完成了他们的首次贡献https://github.com/nuxt/ui/pull/6149
- @caiotarifa 完成了他们的首次贡献https://github.com/nuxt/ui/pull/6194
- @0xA1337 完成了他们的首次贡献https://github.com/nuxt/ui/pull/6115
- @adamgreenhall 完成了他们的首次贡献https://github.com/nuxt/ui/pull/6199
- @dropdead619 完成了他们的首次贡献https://github.com/nuxt/ui/pull/6100
- @SusithD 完成了他们的首次贡献https://github.com/nuxt/ui/pull/6122
- @howwohmm 完成了他们的首次贡献https://github.com/nuxt/ui/pull/6226