太香了！Nuxt UI 4.7 正式更新，125+组件库再添王炸新组件，企业级开发直接提速

前端Hardy
0 阅读7分钟

还在自己封装下拉列表、AI提示词展示组件？

还在为后台管理、官网、AI应用重复写基础交互样式？

前端开发者又迎来重磅福利—— Nuxt UI 4.7 正式版悄悄上线了！

作为 Vue + Nuxt 生态最火的企业级 UI 库，

这次更新不搞花里胡哨，全部贴合实际开发场景，

一口气补齐日常高频缺失组件，新增 Listbox 组件 及可构建AI聊天界面的专属组件，支持流式传输、推理和工具调用，

自带 125+ 成熟组件，开箱即用，企业项目直接无缝接入。

不用自己造轮子、不用反复调试样式交互，

升级一次，直接省下大把封装时间。

一、Nuxt UI 4.7 到底强在哪？

熟悉 Nuxt UI 的都知道，它不是普通的 UI 组件库。

基于 Tailwind 原生驱动、适配暗色模式、支持自定义主题、

完美适配 Nuxt 全版本、Vue 项目也能单独引入使用，

从官网、落地页、后台管理，到现在大火的 AI 应用，全都能撑起来。

目前已经拥有 125+ 高质量基础及业务组件，

覆盖按钮、表单、弹窗、布局、导航、数据展示全套能力，

而 4.7 版本，更是精准补上了开发者日常最想要的两大刚需功能——进阶选择组件与AI聊天组件，均为官网可查，无任何虚有内容。

二、两大重磅新功能，直接解决开发痛点

1、全新 Listbox 组件：进阶版下拉选择神器（Nuxt UI 4.7 新增核心组件）

做企业后台、表单页面、筛选功能的开发者，一定懂：

普通 Select 组件样式丑、自定义难、不支持分组、

不能自定义选项渲染、交互体验差，遇到长列表更是卡顿明显。

这次 Nuxt UI 4.7 直接上线 Listbox 组件，

属于进阶版高级选择组件，区别于传统弹窗式下拉，支持常驻页面展示，完美解决长列表交互痛点：

  • 支持单选 / 多选，满足不同表单场景需求

  • 支持分组列表、禁用选项，适配权限选择、角色筛选等企业级场景

  • 完全自定义选项模板，图文混排、图标搭配随便写，不用额外改样式

  • 键盘方向键导航、回车选中、ESC关闭，无障碍适配拉满

  • 自带悬浮、选中、禁用状态样式，贴合 Nuxt UI 整体设计风格

  • 完美适配暗色模式，自动跟随项目主题，不用单独适配

  • 内置搜索功能，长列表（上千条数据）可实时过滤，查找秒级响应

  • 支持虚拟滚动，大数据量展示不卡顿，性能拉满

企业级表单、角色选择、权限下拉、筛选菜单，

以后直接用 Listbox，不用自己封装、不用改样式，拿来就用，3行代码就能快速上手：

<script setup lang="ts">
const items = ref([
  { label: 'Vue.js', icon: 'i-lucide-code', value: 'vue' },
  { label: 'Nuxt.js', icon: 'i-lucide-rocket', value: 'nuxt' },
  { label: 'React', icon: 'i-lucide-brain', value: 'react' },
])
const selected = ref()
</script>

<template>
  <UListbox v-model="selected" :items="items" />
</template>

2、AI聊天专属组件：一键构建带流式、推理和工具调用的交互界面

随着AI应用爆发，开发者搭建聊天界面时，经常要手动处理流式传输、推理过程展示、工具调用交互，代码繁琐且易出错。

Nuxt UI 4.7 官网新增一套 AI 聊天专属组件，核心支持 Build AI chat interfaces with streaming, reasoning, and tool calling（构建带流式、推理和工具调用的AI聊天界面），无需复杂封装，开箱即用：

  • 流式传输支持：实时展示AI回复，模拟打字效果，提升交互体验，无需手动处理流数据

  • 推理过程展示：可折叠显示AI思维链，让用户清晰看到AI思考过程，贴合ChatGPT同款体验

  • 工具调用适配：内置工具调用模块，可折叠展示工具调用状态，完美适配function call场景

  • 全套组件配套：包含消息列表、消息气泡、输入框、提交按钮等，一站式搭建完整聊天界面

  • 无缝集成Vercel AI SDK：无需额外配置，快速对接OpenAI等模型，降低开发成本

  • 高度可定制：支持自定义样式、插槽拓展，适配不同AI应用场景（对话机器人、AI工具等）

极简实战示例（复制就能跑，贴合官网用法）：

<script setup lang="ts">
// 对接Vercel AI SDK，实现流式交互
import { useChat } from 'ai/vue'

const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat()
</script>

<template>
  <div class="max-w-2xl mx-auto p-4&#34;&gt;
    <!-- 聊天消息列表（自动滚动，支持流式展示） -->
    <UChatMessageList :messages="messages">
      <template #default="{ message }">
        <UChatMessage :message="message">
          <!-- 消息操作插槽（复制/重新生成） -->
          <template #actions>
            <UButton icon="i-lucide-copy" variant="ghost" size="sm" />
          </template>
        </UChatMessage>
      </template>
    &lt;/UChatMessageList&gt;

    <!-- 聊天输入框 + 提交按钮（适配加载状态） -->
    <form @submit.prevent="handleSubmit" class="mt-4">
      <UChatPrompt
        v-model="input"
        placeholder="输入你的问题..."
        :disabled="isLoading"
      />
      <UChatPromptSubmit :loading="isLoading" class="mt-2" />
    </form>
  </div>
</template>

用这套组件，半天就能搭建出生产级AI聊天界面，不用自己写流式处理、推理展示、工具调用逻辑，开发效率直接翻倍。

三、不止新功能，细节体验全面优化

除了两大王牌新功能，4.7 版本还做了大量细节打磨，全部贴合实际开发场景，提升开发和使用体验：

  • 现有组件交互逻辑微调，弹窗、浮层定位更精准，解决之前部分场景下的定位偏差问题

  • 表单组件校验逻辑优化，适配更多复杂表单场景，减少校验报错概率

  • 暗色模式切换更丝滑，无样式闪烁问题，提升用户体验

  • 兼容最新 Nuxt 稳定版，同时适配 Tailwind CSS 4，项目升级无冲突、无报错

  • Table 组件强化：虚拟滚动模式下支持粘性表头/表尾，大数据表格滚动不卡顿，表头始终可见

  • CommandPalette 优化：新增 searchDelay 属性，自定义搜索延迟，减少高频搜索时的性能消耗

  • 修复若干细碎 bug（如 ChatMessage 触摸设备交互、ProseImg 缩放关闭等），稳定性再上一个档次

对于正在用 Nuxt UI 的项目，

升级完全无痛，无破坏性变更，兼容旧代码，不用改业务逻辑，直接升级就能体验新功能。

四、为什么现在都推荐用 Nuxt UI？

说点实在的，不吹不黑：

  1. 组件足够全

125+ 组件，从基础控件到企业级业务组件全覆盖，大部分需求不用再额外封装，省去大量重复开发时间。

  1. Tailwind 原生集成

不用额外写 CSS，改主题、调样式、改圆角配色，配置文件一键搞定，样式统一且美观。

  1. 天生适配 Nuxt / Vue

Nuxt 项目零配置引入，普通 Vue3 项目也可单独安装使用，技术栈无门槛，上手简单。

  1. 企业级审美在线

默认样式简约高级，符合现代企业级项目审美，不用大刀阔斧修改，就能直接上生产环境。

  1. 更新勤快、接地气

每次更新都贴合真实开发场景，不是堆无用功能，这次 Listbox 组件与AI聊天组件，都是开发者高频刚需，尤其AI聊天组件，完美满足流式、推理、工具调用的开发需求。

五、怎么升级使用？

升级 Nuxt UI（4.x 版本用户直接升级，无兼容问题）

pnpm up @nuxt/ui
# 或
npm update @nuxt/ui
# 或（指定 4.7.1 最新补丁版）
pnpm add @nuxt/ui@4.7.1
npm install @nuxt/ui@4.7.1

升级后直接在页面引入新组件即可，

升级后直接在页面引入新组件即可，Listbox 组件与AI聊天组件均可直接在 Vue 模板中使用，官网均有详细示例，直接复制就能用。

最后

做 Vue、Nuxt 项目的开发者，真的没必要再重复造轮子。

Nuxt UI 4.7 这次更新特别实在，

没有花里胡哨的噱头，全部都是能直接落地提效的功能。

Listbox 解决企业表单、长列表选择痛点，

AI聊天组件完美适配当下AI应用开发热潮，支持流式、推理和工具调用，不用手动封装复杂逻辑，

再加上 125+ 成熟组件打底，

不管是做官网、后台管理、还是 AI 工具项目，都足够能打。

如果你正在用 Nuxt UI，建议直接升级；

还没尝试过的，真的可以入坑了。

官方文档：ui.nuxt.com/
更新日志：ui.nuxt.com/releases
中文文档：ui.nuxtjs.org.cn/docs/compon…

你平时开发最缺哪类封装组件？Listbox 和 AI聊天组件（支持流式/推理/工具调用）哪个对你用处更大？评论区聊聊！

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！

avatar
文章
阅读
粉丝