Vue 流式 Markdown 渲染器
markstream-vue 是 Markstream 家族里最成熟的渲染器，适合 Vue 3、Nuxt、VitePress、AI 聊天、SSE/WebSocket 输出、移动端 WebView 和长文档。它直接渲染 Markdown 字符串，也支持传入预解析的节点数组，用来控制高频流式输出的解析节奏。
| 需求 | 推荐做法 |
|---|---|
| AI 聊天或 SSE 输出 | mode="chat"，传入持续累加的 content 和流结束状态 final |
| 文档站或稳定长文 | mode="docs"，按需启用 stream-diffs、Mermaid、KaTeX |
| 移动端 WebView | 导入 markstream-vue/index.px.css |
| 50KB 以上长回答 | 使用 node-virtual="auto" 和 live node 限制 |
bash
pnpm add markstream-vuevue
<script setup lang="ts">
import MarkdownRender from 'markstream-vue'
import { ref } from 'vue'
import 'markstream-vue/index.css'
const content = ref('# 你好\n\n等待第一个 chunk…')
const isDone = ref(false)
</script>
<template>
<MarkdownRender
mode="chat"
:content="content"
:final="isDone"
/>
</template>每收到一个 chunk 就追加到 content，流关闭时设置 isDone.value = true。chat preset 已经包含面向流式输出的默认值，只有行为确实需要变化时才覆盖具体 prop。
如果输出来自外部用户或模型，优先使用 htmlPolicy="escape" 或默认安全策略，不要把原始 HTML 当成可信内容。只在需要 Mermaid、KaTeX、stream-diffs、D2 或 Infographic 时安装对应 peer 依赖。
不适合的情况：只渲染很短的静态 Markdown、只需要 HTML 字符串、或者项目已经有完整 sanitizer/plugin 体系且没有流式体验要求。