Vue 3 聊天组件 Advanced Chat Components V3 RC：ESM-only、数据层自备、不是 v2 的 drop-in 替换
一个框架中立的聊天 Web Component，同时是一套带类型的 Vue 3 组件库：rooms、messages、files、audio、reactions、replies、edits、typing indicators、主题、国际化，以及配套 composables。后端无关（backend-agnostic）——数据层由你自己实现。
- 项目地址：
- V3 文档：
仓库当前包含 Release Candidate 线：
- V3 release candidate —— 以
@advanced-chat/components@3.0.0-rc.3发布在 npm 的nexttag 上。包含 28 个带类型的 Vue 3 SFC，以及一个官方 light-DOM web-component 入口。包是 ESM-only；纯浏览器的 UMD 产物仍可通过 CDN metadata 获取。 - Legacy v2 —— 以
vue-advanced-chat@2.1.2发布。现有 v2 应用可以继续用这个稳定包，其源码保留在v2分支。V3 不是 v2 的 drop-in 替换。
V3 文档
V3 文档站基于 Storybook 构建，从默认分支部署：
站点包含每个组件的 prop / event / slot 表格、prose guides、cookbook，以及公开 API reference。V3 新用户从文档站的 Quick Start 页面开始。
安装（V3）
npm install @advanced-chat/components@next
Vue 3.5+ 是 peer dependency。
Vue 3 里的用法
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { AdvancedChatPlugin } from '@advanced-chat/components'
import '@advanced-chat/components/styles'
createApp(App).use(AdvancedChatPlugin()).mount('#app')
import { ref } from 'vue'
import { AdvancedChat, type ChatModel, type MessageModel, type User } from '@advanced-chat/components'
const currentUser: User = { id: 'me', name: 'Alice', status: { state: 'online' } }
const chats = ref([{ id: 'general', name: 'General', users: [currentUser] }])
const messages = ref([])
Web Component 里的用法
框架无关入口在 import 时会打包自己的 Vue runtime，并在 light DOM 中注册 ``。加载对应样式表，然后以 DOM property 的形式赋值对象和数组，而不是写成 JSON attribute：
import '@advanced-chat/components/web-component'
import '@advanced-chat/components/web-component/styles'
const chat = document.querySelector('#chat')
chat.currentUser = { id: 'me', name: 'Alice', status: { state: 'online' } }
chat.chats = [{ id: 'general', name: 'General', users: [] }]
chat.chat = chat.chats[0]
chat.messages = []
chat.chatsLoaded = true
chat.messagesLoaded = true
chat.addEventListener('send-message', (event) => {
console.log(event.detail.content, event.detail.files, event.detail.mentionedUsers)
})
import @advanced-chat/components/web-component 会自动注册默认 tag，并带自动国际化。该入口导出 AdvancedChatHTMLElement、AdvancedChatEventMap、AdvancedChatElementConstructor，DOM property 和 event detail 因此都有类型。事件载荷直接暴露为 CustomEvent.detail，不再包一层 Vue 参数数组。公开事件会冒泡并跨越 shadow 边界，所以宿主可以用事件委托。
如果需要自己控制注册时机，或在服务端渲染，就 import 无副作用的 core 入口：
import { registerAdvancedChat, type AdvancedChatHTMLElement } from '@advanced-chat/components/web-component/core'
import '@advanced-chat/components/web-component/styles'
if (typeof window !== 'undefined') {
registerAdvancedChat({ tagName: 'acme-chat' })
}
包里带有一个基于标准的 custom-elements.json manifest，用于 IDE 补全和能识别 custom element 的工具链。Vanilla JavaScript、React、Angular、Svelte 等框架示例在文档站的 Web Components 页面。
registerAdvancedChat({ tagName, strings, localization }) 可以注册另一个 tag。对自动注册过的默认 managed tag 再调用一次，只影响调用之后挂载的元素；已经挂载的元素保留创建时用的国际化配置。选项不会被静默应用到由无关构造函数注册的 tag 上。
数据层归你管
Mention 的选择会序列化成 content 中稳定的 `` token，对应的完整 user 对象同时出现在 send-message 和 edit-message 的 mentionedUsers 里。
待发送附件的 object URL 在 send/edit 之前由库持有并负责清理；一旦 emit 出 localUrl，其所有权就转移给宿主，宿主必须在不再需要时 revoke。
Transport、persistence、authorization、upload、realtime 和 retry policy 都仍然是宿主应用的职责。
完整可跑的例子见文档站的 Quick Start 页面，它把整条链路端到端串了一遍。要在后面接真实后端，见 Cookbook → Backend Integration。
安装（v2）
npm install vue-advanced-chat
v2 的源码和文档在 v2 分支。
开发
npm ci
npm run storybook # local docs + component playground
npm run verify # format + types + lint + tests + build + pack + storybook
使用 Node 22.14.0 或更高版本（.nvmrc）。
主要 npm run 脚本包括 format、format:check、lint、type-check、test、test:unit、test:storybook、test:coverage、build、build-storybook、verify、verify:pack、verify:web-component。verify 串起来的正是 CI 也会跑的发布门禁。
License
MIT。