{"id":18527,"library":"markstream-vue","title":"markstream-vue","description":"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.","status":"active","version":"0.0.13-beta.7","language":"javascript","source_language":"en","source_url":"https://github.com/Simon-He95/markstream-vue","tags":["javascript","vue","vue3","markdown","markdown-to-html","markdown-renderer","streaming-markdown","streaming-renderer","vue-markdown","typescript"],"install":[{"cmd":"npm install markstream-vue","lang":"bash","label":"npm"},{"cmd":"yarn add markstream-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add markstream-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency — requires Vue >=3.0 for component rendering","package":"vue","optional":false},{"reason":"Peer dependency — core stream parsing logic","package":"stream-markdown","optional":false},{"reason":"Peer dependency — renders LaTeX math expressions","package":"katex","optional":true},{"reason":"Peer dependency — renders diagrams in Markdown","package":"mermaid","optional":true},{"reason":"Peer dependency — required for internationalization support","package":"vue-i18n","optional":true},{"reason":"Peer dependency — alternative diagram rendering","package":"@antv/infographic","optional":true},{"reason":"Peer dependency — alternative diagram rendering","package":"@terrastruct/d2","optional":true},{"reason":"Peer dependency — streaming Monaco editor integration","package":"stream-monaco","optional":true}],"imports":[{"note":"Named export — default export is not available.","wrong":"import MarkstreamRenderer from 'markstream-vue'","symbol":"MarkstreamRenderer","correct":"import { MarkstreamRenderer } from 'markstream-vue'"},{"note":"When using CJS, use require('markstream-vue').default; import default from ESM.","wrong":"const MarkstreamRenderer = require('markstream-vue')","symbol":"default","correct":"import MarkstreamRenderer from 'markstream-vue'"},{"note":"Options is a TypeScript type — use `import type` for type-only imports.","wrong":"import { MarkstreamOptions } from 'markstream-vue'","symbol":"type MarkstreamOptions","correct":"import type { MarkstreamOptions } from 'markstream-vue'"},{"note":"Props is a TypeScript type — use `import type`.","wrong":"import { MarkstreamRendererProps } from 'markstream-vue'","symbol":"MarkstreamRendererProps","correct":"import type { MarkstreamRendererProps } from 'markstream-vue'"}],"quickstart":{"code":"<template>\n  <MarkstreamRenderer\n    :content=\"markdownContent\"\n    :stream-options=\"{ mode: 'incremental' }\"\n    :highlight=\"true\"\n    :katex=\"true\"\n    :mermaid=\"true\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { MarkstreamRenderer } from 'markstream-vue'\nimport 'markstream-vue/dist/style.css'\n\nconst markdownContent = ref('# Hello Markstream\\n\\nThis is **streaming** markdown with $E=mc^2$ math.')\n</script>","lang":"typescript","description":"Basic usage of MarkstreamRenderer component with streaming, KaTeX math, and Mermaid diagram support."},"warnings":[{"fix":"Replace `:codeBlockTheme` with `:codeTheme` in template.","message":"Breaking change: renamed 'codeBlockTheme' prop to 'codeTheme' in v0.0.13-beta.5","severity":"breaking","affected_versions":">=0.0.13-beta.5"},{"fix":"Use `:stream-options=\"{ batchSize: 100 }\"`.","message":"Breaking change: 'stream-options' prop 'chunkSize' renamed to 'batchSize' in v0.0.13-beta.6","severity":"breaking","affected_versions":">=0.0.13-beta.6"},{"fix":"Use `import { MarkstreamRenderer } from 'markstream-vue'`.","message":"Deprecated: importing from 'markstream-vue/dist/markstream-vue' is deprecated; use 'markstream-vue' directly","severity":"deprecated","affected_versions":">=0.0.12"},{"fix":"Run `npm install mermaid` and pass `:mermaid=\"true\"` to the component.","message":"Mermaid diagrams require the 'mermaid' peer dependency installed; otherwise they render as plain text.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Install `katex` and set `:katex=\"true\"`.","message":"KaTeX rendering requires the 'katex' peer dependency; ensure you import KaTeX CSS separately if needed.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use `import { MarkstreamRenderer } from 'markstream-vue'` and register locally or globally.","cause":"Component not registered or imported incorrectly (missing named import).","error":"Failed to resolve component: MarkstreamRenderer"},{"fix":"Use `:stream-options` (kebab-case) or bind via `v-bind:streamOptions`.","cause":"Using 'streamOptions' instead of kebab-case 'stream-options' in template.","error":"[Vue warn]: Failed to resolve prop: stream-options"},{"fix":"Run `npm install katex` or set `:katex=\"false\"` if not needed.","cause":"KaTeX peer dependency not installed but :katex=\"true\" is set.","error":"Module not found: Can't resolve 'katex'"},{"fix":"Use `const { MarkstreamRenderer } = require('markstream-vue')`.","cause":"Using CommonJS require() without accessing .default.","error":"TypeError: markstream_vue_1.default is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}