markstream-vue

0.0.13-beta.7 verified Sat Apr 25 auth: no javascript

A streaming-friendly Vue 3 Markdown renderer (v0.0.13-beta.7) optimized for AI chat UIs, documentation sites, and large documents. Supports progressive Mermaid diagrams, streaming diff code blocks (Monaco/Shiki), and dual rendering modes (virtualized window for long docs or typewriter batch for incremental output). Includes built-in KaTeX math, custom Vue component embedding, and TypeScript types. Released with weekly nightlies; integrates with Vue 3, VitePress, and works in both ESM and CJS environments.

Common errors

error Failed to resolve component: MarkstreamRenderer ↓

cause Component not registered or imported incorrectly (missing named import).

fix

Use import { MarkstreamRenderer } from 'markstream-vue' and register locally or globally.

error [Vue warn]: Failed to resolve prop: stream-options ↓

cause Using 'streamOptions' instead of kebab-case 'stream-options' in template.

fix

Use :stream-options (kebab-case) or bind via v-bind:streamOptions.

error Module not found: Can't resolve 'katex' ↓

cause KaTeX peer dependency not installed but :katex="true" is set.

fix

Run npm install katex or set :katex="false" if not needed.

error TypeError: markstream_vue_1.default is not a function ↓

cause Using CommonJS require() without accessing .default.

fix

Use const { MarkstreamRenderer } = require('markstream-vue').

Warnings

breaking Breaking change: renamed 'codeBlockTheme' prop to 'codeTheme' in v0.0.13-beta.5 ↓

fix Replace `:codeBlockTheme` with `:codeTheme` in template.

breaking Breaking change: 'stream-options' prop 'chunkSize' renamed to 'batchSize' in v0.0.13-beta.6 ↓

fix Use `:stream-options="{ batchSize: 100 }"`.

deprecated Deprecated: importing from 'markstream-vue/dist/markstream-vue' is deprecated; use 'markstream-vue' directly ↓

fix Use `import { MarkstreamRenderer } from 'markstream-vue'`.

gotcha Mermaid diagrams require the 'mermaid' peer dependency installed; otherwise they render as plain text. ↓

fix Run `npm install mermaid` and pass `:mermaid="true"` to the component.

gotcha KaTeX rendering requires the 'katex' peer dependency; ensure you import KaTeX CSS separately if needed. ↓

fix Install `katex` and set `:katex="true"`.

Install

npm install markstream-vue

yarn add markstream-vue

pnpm add markstream-vue

Imports

MarkstreamRenderer

wrong

import MarkstreamRenderer from 'markstream-vue'

correct

import { MarkstreamRenderer } from 'markstream-vue'

Named export — default export is not available.

default

wrong

const MarkstreamRenderer = require('markstream-vue')

correct

import MarkstreamRenderer from 'markstream-vue'

When using CJS, use require('markstream-vue').default; import default from ESM.

type MarkstreamOptions

wrong

import { MarkstreamOptions } from 'markstream-vue'

correct

import type { MarkstreamOptions } from 'markstream-vue'

Options is a TypeScript type — use `import type` for type-only imports.

MarkstreamRendererProps

wrong

import { MarkstreamRendererProps } from 'markstream-vue'

correct

import type { MarkstreamRendererProps } from 'markstream-vue'

Props is a TypeScript type — use `import type`.

Quickstart

Basic usage of MarkstreamRenderer component with streaming, KaTeX math, and Mermaid diagram support.

<template>
  <MarkstreamRenderer
    :content="markdownContent"
    :stream-options="{ mode: 'incremental' }"
    :highlight="true"
    :katex="true"
    :mermaid="true"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { MarkstreamRenderer } from 'markstream-vue'
import 'markstream-vue/dist/style.css'

const markdownContent = ref('# Hello Markstream\n\nThis is **streaming** markdown with $E=mc^2$ math.')
</script>