Nuxt streaming Markdown renderer for AI chat

markstream-vue works with Nuxt 3 for streaming Markdown in AI chat UIs, SSE/WebSocket output, SSR pages, and long documents. Standard Markdown can render during Nuxt SSR; browser-only optional peers upgrade after hydration.

When to use markstream-vue with Nuxt

Use markstream-vue in Nuxt when:

• Your AI chat UI or streaming Markdown surface is in a Nuxt 3 app
• You need SSR-first Markdown output for SEO or first paint
• Browser-only optional peers need .client plugin setup
• Web Workers for Mermaid or KaTeX need Nuxt/Vite configuration
• Long AI responses need bounded live nodes

Install

pnpm add markstream-vue

SSR-first default

markstream-vue can render standard Markdown during Nuxt SSR. Heavy nodes such as Mermaid, D2, Infographic, Monaco-backed code blocks, and worker-backed enhancements upgrade after hydration.

<!-- pages/index.vue -->
<script setup lang="ts">
import MarkdownRender from 'markstream-vue'
import 'markstream-vue/index.css'

const markdown = '# Hello Nuxt SSR'
</script>

<template>
  <MarkdownRender :content="markdown" final />
</template>

When to use <ClientOnly>

Use <ClientOnly> only when your surrounding page logic or optional peer setup is browser-only:

<template>
  <ClientOnly>
    <MarkdownRender
      mode="chat"
      :content="streamingContent"
      :final="isDone"
      :fade="false"
    />
  </ClientOnly>
</template>

Worker setup in Nuxt

Mermaid and KaTeX use Web Workers. In Nuxt, import them client-side:

// plugins/markstream.client.ts
import { setKaTeXWorker, setMermaidWorker } from 'markstream-vue'
import KatexWorker from 'markstream-vue/workers/katexRenderer.worker?worker&inline'
import MermaidWorker from 'markstream-vue/workers/mermaidParser.worker?worker&inline'

export default defineNuxtPlugin(() => {
  setMermaidWorker(new MermaidWorker())
  setKaTeXWorker(new KatexWorker())
})

enableMermaid() and enableKatex() control optional dependency loaders. Use setMermaidWorker() and setKaTeXWorker() when you want Mermaid parsing or KaTeX rendering to run off the main thread.

Key considerations

• SSR-first rendering: standard Markdown renders server-side
• Client-only peers: use .client plugins or <ClientOnly> only when the surrounding logic is browser-only
• CSS order: import markstream-vue/index.css after your reset/tailwind
• Hydration upgrades: optional heavy peers activate after hydration
• Mobile px CSS: use markstream-vue/index.px.css if your app scales root font size

Full guide

See Nuxt SSR for the complete Nuxt integration guide with SSR gotchas, worker setup, and performance notes.