markstream-vue2-vite – Design & UI skill for AI agents

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.

1. Confirm Vue 2 with Vite and install only requested peers.

2. Import markstream-vue2/index.css after reset, Tailwind, or UnoCSS layers.

3. Use package worker entrypoints with Vite ?worker or ?worker&inline imports only when needed.

4. Add @vue/composition-api only for Vue 2.6 code requiring it.

5. Keep content with smooth streaming for chat; set final and disable pacing/cursor for history.

6. Use nodes only for externally owned parsing. Keep HTML safe and Mermaid strict.

7. 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.