---
name: sickn33/markstream-vue2-cli
source: https://app.decimal.ai/s/sickn33-markstream-vue2-cli@1/SKILL.md
source_sha256: 6106f99c6bd6
---

# Markstream Vue 2 CLI

## Overview

Handle Vue CLI and Webpack 4 constraints that differ materially from modern Vue 2/Vite setup.

## When to Use

Use when Vue 2 runs on Vue CLI or Webpack 4 and package export maps or Vite worker imports are unavailable.

## Workflow

Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.

1. Confirm Vue 2 plus Vue CLI/Webpack 4.
2. Install `markstream-vue2` and only requested peers.
3. Import `markstream-vue2/dist/index.css`, because legacy tooling may not understand the CSS export map.
4. Avoid `?worker` imports. Use Markstream CDN worker helpers for KaTeX or Mermaid only when needed.
5. Prefer `stream-markdown` code blocks over fragile Monaco worker wiring.
6. Keep `content` with smooth streaming for chat; set `final` and disable pacing/cursor for completed history.
7. Keep HTML safe and Mermaid strict; validate the actual legacy build.

## Example

```vue
<script>
import MarkdownRender from 'markstream-vue2'
// Legacy Webpack may not resolve the package CSS export map.
import 'markstream-vue2/dist/index.css'

export default {
  components: { MarkdownRender },
  data: () => ({ content: '# Answer', done: false }),
}
</script>

<template>
  <MarkdownRender
    :content="content"
    :final="done"
    :fade="false"
  />
</template>
```

## Limitations

- CDN workers require network access and compatible content-security policy.
- Monaco-style worker setups are intentionally not covered.
- Vue 2.6 may also require `@vue/composition-api`.

## Security & Safety Notes

Do not introduce CDN workers without reviewing CSP, network policy, and dependency trust. Preserve safe rendering defaults.