Vue 2 streaming Markdown renderer for AI chat

markstream-vue2 is the Vue 2.6 / 2.7 renderer in the Markstream family. Use it when a legacy Vue 2 app needs AI chat Markdown, LLM token streams, SSE/WebSocket output, incomplete Markdown state handling, Mermaid, KaTeX, Shiki-backed code blocks, or Vue 2 component rendering.

For Vue 3, Nuxt 3, or a new project, start with markstream-vue instead.

When to use markstream-vue2

Use markstream-vue2 when:

• The app must stay on Vue 2.6 or Vue 2.7
• Markdown streams from an LLM, SSE endpoint, or WebSocket
• Unclosed fences, partial math, or partial HTML-like tags should not flicker
• Long AI responses need bounded live rendering
• Mermaid, KaTeX, and code blocks appear during streaming
• Custom Vue 2 node components need to render inside Markdown

Use a simpler Vue Markdown renderer when:

• The app only renders short completed Markdown
• You only need markdown -> HTML
• The project can migrate to Vue 3 and use markstream-vue

Quick Start

pnpm add markstream-vue2

Vue 2.6 apps also need:

pnpm add @vue/composition-api

import VueCompositionAPI from '@vue/composition-api'
import { VueRendererMarkdown } from 'markstream-vue2'
import Vue from 'vue'
import 'markstream-vue2/index.css'

Vue.use(VueCompositionAPI)
Vue.use(VueRendererMarkdown)

Vue 2.7 apps do not need @vue/composition-api, but should still install the renderer plugin:

import { VueRendererMarkdown } from 'markstream-vue2'
import Vue from 'vue'
import 'markstream-vue2/index.css'

Vue.use(VueRendererMarkdown)

Minimal Vue 2 message component:

<script>
import MarkdownRender from 'markstream-vue2'

export default {
  components: { MarkdownRender },
  props: { content: String, done: Boolean },
}
</script>

<template>
  <MarkdownRender :content="content" :final="done" :fade="false" />
</template>

Vue CLI 4 / Webpack 4 projects should use the real CSS file path because Webpack 4 does not support package.json#exports:

import 'markstream-vue2/dist/index.css'

Streaming example

For normal chat streaming, append chunks to content and flip final when the stream ends:

<script>
import MarkdownRender from 'markstream-vue2'

export default {
  components: { MarkdownRender },
  data: () => ({ content: '', final: false }),
}
</script>

<template>
  <MarkdownRender :content="content" :final="final" :fade="false" />
</template>

For high-frequency long streams, use the parser/node path described in the Vue 2 quick start so parsing cadence stays under your control.

Mermaid, KaTeX, and code blocks

Install optional peers only for the blocks you render:

pnpm add stream-markdown

Then enable Shiki-backed code blocks:

import { MarkdownCodeBlockNode, setCustomComponents } from 'markstream-vue2'

setCustomComponents({ code_block: MarkdownCodeBlockNode })

For Mermaid diagrams, install mermaid. For KaTeX math, install katex and import its stylesheet:

pnpm add mermaid
pnpm add katex

import 'katex/dist/katex.min.css'

The default Mermaid and KaTeX loaders are enabled. Use enableMermaid() or enableKatex() only after disabling them or when providing a custom loader.

Compared with Vue Markdown renderers

Need	markstream-vue2	Normal Vue Markdown renderer
Vue 2.6 / 2.7 support	Yes	Varies by package
Streaming AI chat	Built for accumulating content and optional nodes	Usually rerenders completed Markdown
Incomplete Markdown	Streaming-aware mid-state handling	Often unstable while syntax is incomplete
Mermaid / KaTeX / code blocks	Markstream integrations and optional peers	Plugin dependent
New Vue 3 projects	Use markstream-vue instead	Use a Vue 3 package

Try it

• Vue 2 playground
• Vue 2 quick start
• Vue 2 installation
• Framework overview
• npm package