用途:当宿主应用为 Nuxt 3 或 4 且需要处理 SSR 边界时,使用本技能把 markstream-vue 集成进项目。
主要能力与用法:先确认仓库为 Nuxt 3 或 4;安装 markstream-vue 以及当前功能所需的可选 peer 依赖。仅浏览器端使用的 peer 必须放在 client-only 边界内,优先使用 <client-only> 包裹、.client 插件或带守卫的初始化路径。需从客户端安全的应用外壳或插件中引入 markstream-vue/index.css;根 JS 导入不会注入样式,必须显式使用 markstream-vue/index.css 或 markstream-vue/index.px.css。从 content 起步,按展示面选择渲染模式,只有 UI 需要自定义 AST 控制时才使用 nodes 加 final。AI 聊天或 SSE 输出用 mode="chat",它使用轻量批次、fade=false、max-live-nodes=0,smooth-streaming="auto" 控制可见输出节奏;富文档界面用 mode="docs"(默认,启用更大批次、tooltip 和 fade);轻量非聊天界面用 mode="minimal"。常规围栏代码使用内置渲染器,安装可选 peer 后由 stream-diffs 增强;可用 render-code-blocks-as-pre 强制纯文本路径,或用 setCustomComponents(customId, { code_block: ... }) 做应用自有的局部渲染器。typewriter 只控制闪烁光标,默认 false,高频聊天建议 typewriter="simple"。Vue 3(含 Nuxt)中 smooth-streaming 控制输出节奏、fade 控制透明度,可同时启用;mode="chat" 默认 fade=false,需要渐显时再开启。
聊天场景:同一 MarkdownRender 先流式输出、final=true 后切换为历史。流式时用 mode="chat" 和 final,需要渐显加 fade,需要光标再加 typewriter;回放已完成历史时保持 mode="chat",使用 :smooth-streaming="false"、typewriter=false,fade 独立选择。非虚拟聊天滚动条可从 markstream-vue/utils 引入 useStickToBottom,并在 Vue 提交新内容后调用 scheduleScrollToBottom()。
限制:SSR 首屏内容不要用 smooth-streaming="true",应使用默认 auto(内部挂载门控可防注水不匹配);避免服务端代码路径在导入时访问浏览器全局对象;增强代码运行时、Mermaid worker 等重型 peer 视为 client-only;大代码块的可选 off-thread 高亮池(setStreamDiffsWorkerPool,基于 @pierre/diffs WorkerPoolManager)同样仅限客户端。所有 Markstream 包的增强代码块使用 stream-diffs,不要安装 stream-monaco。html-policy 现默认 safe,Mermaid 严格模式默认开启;仅可信的 client-only 界面才能用 html-policy="trusted" 和 :mermaid-props="{ isStrict: false }" 局部退出并记录原因。可用 Nuxt dev、build 或 typecheck 的最小相关命令验证。参考文档:docs/nuxt-ssr.md、docs/guide/installation.md、docs/guide/usage.md、docs/guide/troubleshooting.md。