Markstream Vue 3
Overview
Configure the Vue 3 renderer beyond generic installation: surface modes, streaming lifecycle, code rendering, long-message virtualization, and scoped overrides.
When to Use
Use for a plain Vue 3 application after the package has been selected. Use markstream-nuxt when SSR-specific Nuxt boundaries matter.
Workflow
Inspect the existing package manager, installed package version and project conventions. A requested scoped integration already authorizes routine source/dependency edits; seek approval only for a material scope expansion or unresolved beta/alpha adoption decision.
- Confirm Vue 3 and not Nuxt. Install only requested peers and import
markstream-vue/index.css after resets.
- Start with
content. Use mode="chat" for AI streams, docs for rich documents, and minimal for lightweight non-chat surfaces.
- Choose fenced-code rendering explicitly:
pre without a peer, shiki with stream-markdown, or compatibility-named monaco backed by stream-diffs.
- For live chat use smooth streaming
auto, no fade, and an optional cursor. On completion keep the same mode, set final, and disable pacing/cursor.
- Use
nodes only for worker parsing or structural AST ownership.
- For long transcripts, keep an existing outer message virtualizer in charge. Use Markstream logical height rather than mounted DOM height.
- Use scoped component registration and preserve safe HTML and Mermaid strict mode.
- Validate the smallest build/typecheck plus one incremental stream and one long-message case.
Example
<script setup lang="ts">
import MarkdownRender from 'markstream-vue'
import 'markstream-vue/index.css'
defineProps<{ content: string; isDone: boolean }>()
</script>
<template>
<MarkdownRender
mode="chat"
:content="content"
:final="isDone"
:fade="isDone"
:typewriter="!isDone"
:smooth-streaming="isDone ? false : 'auto'"
html-policy="safe"
/>
</template>
Limitations
- Optional peers add bundle and browser-runtime cost.
- DOM-minimal mode disables wrapper-dependent features.
- Virtualization integration requires stable content and measurement keys.
Security & Safety Notes
Review dependency changes. Never enable trusted HTML or loose Mermaid rendering for untrusted model output.
Verify props, export paths and peer ranges against the installed package, not a mutable upstream main. Test partial and completed streams, malformed/untrusted Markdown, links and image URLs, cancellation and reduced motion. Safe HTML and strict diagrams reduce exposure but do not alone enforce URL/network privacy or application component permissions.