# Markstream Vue2

> Integrate markstream-vue2 into Vue 2.6 or 2.7 with correct Composition API decisions, CSS, streaming state, optional peers, and scoped overrides.

- Skill: `thedixitjain/markstream-vue2` (Agent Skill)
- Install (CLI): `npx skillmds add thedixitjain/markstream-vue2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/thedixitjain/markstream-vue2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: thedixitjain (https://skillmd.com/u/thedixitjain)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/thedixitjain/markstream-vue2

---



# Markstream Vue 2

## Overview

Handle Vue 2.6/2.7 compatibility decisions that the generic installer cannot resolve safely.

## When to Use

Use for Vue 2 integration when no bundler-specific edge case dominates. Use `markstream-vue2-cli` for Vue CLI/Webpack 4 and `markstream-vue2-vite` for Vite worker imports.

## 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.6 or 2.7 and install `markstream-vue2`.
2. Add `@vue/composition-api` only for Vue 2.6 code that uses Composition API patterns; Vue 2.7 has built-in support.
3. Import `markstream-vue2/index.css` after resets.
4. Start with `<MarkdownRender :content="markdown" />` and smooth streaming `auto`.
5. For live chat disable fade and opt into the cursor; on completion set `final`, disable pacing/cursor, and enable fade only if desired.
6. Use `nodes` only when another layer owns parsing. Use scoped mappings for overrides.
7. Keep HTML safe and Mermaid strict; validate with the smallest build or dev command.

## Example

```vue
<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"
    :typewriter="!done"
  />
</template>
```

## Limitations

- Vue 2.6 and 2.7 have different Composition API requirements.
- Legacy bundlers require the dedicated specializations.
- Optional modern peers may not support every Vue 2 toolchain.

## Security & Safety Notes

Review dependency and compatibility changes. Do not relax rendering safety for untrusted content.

---

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

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