Nuxt UI v4.3 发布：原生 AI 富文本编辑器来了，Vue 生态又添一员猛将！

在 Vue 和 Nuxt 的生态圈里，Nuxt UI 一直以其高颜值、易用性和现代化的设计理念，占据着开发者心中的重要位置。

此前，Nuxt UI 官方发布了 v4.3.0 版本。这次更新带来了一个让开发者期待已久的功能模块------全新的富文本编辑器组件套件 ，并且直接支持了 AI 自动补全 和实时协作的解决方案。

在 Web 开发中，富文本编辑器（Rich Text Editor）一直是个"深坑"。要么太重，要么太难定制。

Nuxt UI v4.3 引入了一套基于 TipTap 的全新编辑器组件。TipTap 是目前 Vue 生态中最流行、最强大的无头（Headless）编辑器引擎。Nuxt UI 并没有重新造轮子，而是将 TipTap 的强大能力封装成了符合 Nuxt UI 设计语言的组件。

这次一共新增了 6 个核心组件，基本覆盖了现代编辑器的所有需求：

**Editor**：核心组件，支持 JSON、HTML 和 Markdown 三种内容格式。这意味着你可以直接用它来编辑 Markdown 内容，或者直接存 JSON 做数据结构化。
**EditorToolbar**：高度可定制的工具栏。你可以像搭积木一样配置加粗、斜体、链接等按钮。
**EditorSuggestionMenu**：类似 Notion 的 / 命令菜单。输入 / 就能唤出菜单，插入标题、列表、代码块或图片。这是现代编辑器的标配体验。
**EditorMentionMenu**：@ 提及菜单。在协作场景中，输入 @ 就能通过这个菜单选择用户。
**EditorEmojiMenu**：: 表情选择器。输入冒号即可快速插入 Emoji，提升交互的趣味性。
**EditorDragHandle**：拖拽手柄。这是一个非常"高级"的功能，允许用户像在 Notion 中一样，按住段落左侧的手柄拖动整块内容进行重新排序。

**为什么这很重要？**以前要在 Vue 项目里实现这一套"Notion 级"的体验，你需要自己去啃 TipTap 的文档，自己写样式，自己处理菜单的定位逻辑。现在，Nuxt UI 直接把这些封装好了，开箱即用，而且样式与你的 Nuxt UI 主题完美融合。

除了组件本身，Nuxt UI 团队还发布了一个全新的 Editor 模板，展示了如何将这些组件组合成一个生产力怪兽。这个模板演示了两个当下最火的技术方向：

实时协作（Real-time Collaboration） ：通过 PartyKit 实现。多人同时编辑同一个文档，光标实时可见，内容毫秒级同步。
AI 自动补全（AI Autocompletion） ：结合 Vercel AI SDK 和 Vercel AI Gateway。在编辑器中，AI 可以根据上下文自动补全内容，或者帮你润色文案。

这标志着 Nuxt UI 正在从单纯的 UI 库，向"全栈交互解决方案"进化。对于开发者来说，这意味着构建一个带有 AI 辅助写作功能的文档应用，门槛被极大地降低了。

除了编辑器，v4.3 还引入了一个非常实用的新组件：**ScrollArea**。

在处理大量数据列表（比如日志查看、长评论区）时，普通的滚动条往往会带来性能问题。新的 ScrollArea 组件内置了基于 TanStack Virtual 的虚拟滚动（Virtualization）支持。

什么是虚拟滚动？

简单来说，就是只渲染用户当前屏幕上可见的那几条数据。无论你的列表有 1000 条还是 10 万条，DOM 节点的数量都保持在几十个，从而保证页面的极速流畅。

参考资料