markstream-vue2-vite
Integrate markstream-vue2 into Vue 2 plus Vite with bundled worker imports, CSS ordering, Composition API compatibility, and safe streaming defaults.
IT & Software Developmentmarkdownstreamingvitevue2workers
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
Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.
- Confirm Vue 2 with Vite and install only requested peers.
- Import
markstream-vue2/index.cssafter reset, Tailwind, or UnoCSS layers. - Use package worker entrypoints with Vite
?workeror?worker&inlineimports only when needed. - Add
@vue/composition-apionly for Vue 2.6 code requiring it. - Keep
contentwith smooth streaming for chat; setfinaland disable pacing/cursor for history. - Use
nodesonly 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 no
Subscribers only
The full skill, its 1 bundled files and every download is included with every paid Complete AI plan.
Details
| Source | Simon-He95/markstream-vue |
|---|---|
| License | MIT |
| Risk label | critical ("critical" means the skill may run commands or touch files — read before use) |
| Files | SKILL.md |
| Added | 2026-07-21 |
Related skills
anti-ui-slop
Stop coding agents from shipping generic UI. Extend the product's design system, use UIZZE evidence only when useful, cover required states, and inspect the rendered result.
astro
Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.
chat-widget
Build a real-time support chat system with a floating widget for users and an admin dashboard for support staff. Use when the user wants live chat, customer support chat, real-time messaging, or in-app support.
chrome-extension-developer
Expert in building Chrome Extensions using Manifest V3. Covers background scripts, service workers, content scripts, and cross-context communication.
design-it
Routes frontend design tasks to 48 specific UI styles. Triggers for websites, app screens, or UI components requesting a specific aesthetic.
design-taste-frontend
Use when building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules.
