Vue 3 Ecosystem Introduces Real Streaming Rendering

Two months ago a Vue team post mentioned the lack of an async plugin, prompting community developer SerKo to release markdown-exit , a TypeScript rewrite of the 2014 markdown-it library that finally provides a native async plugin.

Support streaming rendering for large‑model output? Re‑rendering the whole document wastes performance; streaming would be much faster.

The answer is now available as vue-renderer-markdown , a library that brings native streaming rendering to Vue 3.

What problems does streaming rendering solve?

Large language models typically use Server‑Sent Events to stream tokens. Traditional solutions either wait for the full document before rendering (causing 5–10 s white‑screen flashes) or use v-html to append content, which leads to flashing code blocks, formulas, and erratic scrolling. Re‑invoking markdown-it.render replaces the whole node tree, losing cursor and selection state.

Streaming rendering aims to render tokens as they arrive, update only the differences, and keep the UI stable.

Features of vue-renderer-markdown

⚡ Extreme performance : minimizes re‑renders for streaming scenarios, updating the DOM efficiently.

🌊 Streaming‑first : natively supports incomplete or frequently updating Markdown content.

🧠 Monaco incremental highlighting : large code blocks are highlighted incrementally without full‑screen refreshes.

🪄 Progressive Mermaid : renders a sketch as soon as the syntax is recognized, then refines it.

🧩 Custom components : embed Vue components directly inside Markdown.

📦 Zero configuration : works out‑of‑the‑box in any Vue 3 project.

Incremental DOM updates

The library splits Markdown into a token stream, then maps each token to a Vue VNode patch. In short, “as many new tokens arrive, insert that many nodes; existing nodes stay untouched.” This approach handles AI‑generated output that often breaks mid‑sentence, rendering the title and first list item immediately while the rest fills in gradually.

# Title

1. First
2. Second

When the second line is still being typed, the library can already render the title and the first item, then smoothly append the rest.

Three core blocks with special streaming optimizations

Code blocks : integrated with Monaco for incremental syntax highlighting; even thousands of lines scroll smoothly.

Mermaid diagrams : as soon as the syntax is detected, a rough sketch is rendered, then refined progressively.

KaTeX formulas : long formulas are laid out incrementally, preventing whole‑line jumps.

Getting started in two minutes

npm i vue-renderer-markdown

<template>
  <MarkdownRenderer :stream="chunk" />
</template>

<script setup>
import { ref } from 'vue'
import MarkdownRenderer from 'vue-renderer-markdown'

const chunk = ref('')
const evtSource = new EventSource('/api/ai-stream')

evtSource.onmessage = (e) => {
  chunk.value += e.data // append each sentence
}
</script>

The zero‑config nature means each time chunk receives more characters, the right side smoothly “grows” without flicker.

Measured results

In a 3 000‑line code block scenario, traditional markdown-it caused a 1.2 s pause and flashing, while vue-renderer-markdown achieved 60 fps smooth scrolling. For large Mermaid diagrams, the old approach required three re‑renders and misalignment, whereas the new library rendered once and refined progressively. Long mathematical documents that previously caused whole‑page jumps now layout incrementally line by line.

Conclusion

The progression from markdown-it → markdown-exit → vue-renderer-markdown rewrites both the “engine” and the “full‑vehicle experience” of the Vue ecosystem. In the AI era, content generation is streaming, and rendering must be streaming as well.

Related Links

Online demo: https://vue-markdown-renderer.simonhe.me GitHub repository:

https://github.com/Simon-He95/vue-markdown-renderer