Markstream Vue 2 Vite
Overview
Use Vite-native worker bundling while preserving Vue 2 compatibility and rendering safety.
When to Use
Use when the host is Vue 2 with Vite and needs bundled Mermaid or KaTeX workers. Use the generic Vue 2 skill when worker/bundler behavior is irrelevant.
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 2 with Vite and install only requested peers.
- Import
markstream-vue2/index.css after reset, Tailwind, or UnoCSS layers.
- Use package worker entrypoints with Vite
?worker or ?worker&inline imports only when needed.
- Add
@vue/composition-api only for Vue 2.6 code requiring it.
- Keep
content with smooth streaming for chat; set final and disable pacing/cursor for history.
- Use
nodes only for externally owned parsing. Keep HTML safe and Mermaid strict.
- Validate the Vite build and worker loading path.
Example
<script>
import MarkdownRender from 'markstream-vue2'
import 'markstream-vue2/index.css'
export default {
components: { MarkdownRender },
props: { content: String, done: Boolean },
}
</script>
<template>
<MarkdownRender
:content="content"
:final="done"
:fade="done"
/>
</template>
Limitations
- Vite worker syntax is not portable to Vue CLI/Webpack 4.
- Inline workers can increase bundle size.
- Optional peers may impose additional browser requirements.
Security & Safety Notes
Review worker source, CSP, dependency changes, and bundle impact. Do not relax safe rendering defaults.
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.
Vue 2 is end-of-life; preserve a requested legacy integration and document its maintenance/support decision rather than silently upgrading the whole application. Prefer reviewed locally bundled workers over mutable CDN code where feasible.