Markstream Vue2 Cli

---
name: markstream-vue2-cli
description: "Integrate markstream-vue2 into Vue CLI or Webpack 4 with export-map-safe CSS, CDN worker fallbacks, and conservative code-block defaults."
allowed-tools: "[claude, cursor, gemini, codex]"
category: frontend-and-design
source_repo: sickn33/agentic-awesome-skills
source_path: "skills/markstream-vue2-cli/SKILL.md"
source_url: https://github.com/sickn33/agentic-awesome-skills/blob/HEAD/skills/markstream-vue2-cli/SKILL.md
---


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

---

**Source:** [`sickn33/agentic-awesome-skills`](https://github.com/sickn33/agentic-awesome-skills) → `skills/markstream-vue2-cli/SKILL.md`

**Also appears in:** `sickn33/agentic-awesome-skills/plugins/agentic-awesome-skills/skills/markstream-vue2-cli/SKILL.md`, `sickn33/agentic-awesome-skills/plugins/agentic-awesome-skills-claude/skills/markstream-vue2-cli/SKILL.md`