# Markstream Vue2 Vite

Integrate markstream-vue2 into a Vue 2 plus Vite app.

- Repository: https://github.com/Simon-He95/markstream-vue (3046 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Simon-He95/markstream-vue --skill markstream-vue2-vite -g -a claude-code -y`
Codex: `npx skills add Simon-He95/markstream-vue --skill markstream-vue2-vite -g -a codex -y`
Cursor: `npx skills add Simon-He95/markstream-vue --skill markstream-vue2-vite -g -a cursor -y`
Gemini CLI: `npx skills add Simon-He95/markstream-vue --skill markstream-vue2-vite -g -a gemini-cli -y`

## Description

Integrate markstream-vue2 into a Vue 2 plus Vite app. Use when Codex needs Vite-friendly worker imports, `?worker` or `?worker&inline` setup for Mermaid or KaTeX, modern CSS ordering, or Vue 2 compatibility in a Vite-based repository.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Markstream Vue 2 Vite

Use this skill when the host app is Vue 2 and the bundler is Vite.

## Workflow

1. Confirm the repo is Vue 2 with Vite-based tooling.
2. Install `markstream-vue2` plus only the requested optional peers.
3. Import `markstream-vue2/index.css` after resets.
4. Use Vite worker imports when the repo needs bundled workers.
   - `markstream-vue2/workers/... ?worker` or `?worker&inline` patterns are allowed here.
5. Keep Composition API decisions explicit for Vue 2.6 repos.
   - For AI chat or streaming UIs, keep `content` and use built-in smooth streaming first.
     - `smooth-streaming="auto"` is the default and activates when `typewriter=true` or `max-live-nodes <= 0`.
     - `typewriter` only controls the blinking cursor and defaults to `false`.
     - `fade` controls node enter and streamed-text fade animations and defaults to `true`.
   - **Streaming vs recovering history**: in chat UIs the same `MarkdownRender` starts streaming and later switches to history when `final=true`.
     - Streaming: `smooth-streaming="auto"`, `:fade="false"`, `typewriter=true`. This is a conservative visual/performance choice, not an API incompatibility. This adapter has not adopted Vue 3's bounded append fades, so verify its animation behavior before enabling both.
     - Recovering history: `:smooth-streaming="false"`, `:fade="true"`, `typewriter=false`. Content is already complete, pacing would slow it down, but fade gives a polished entry animation.
     - Dynamic switch: `:smooth-streaming="isStreaming ? 'auto' : false"`, `:fade="!isStreaming"`.
   - Move to `nodes` + `final` only for worker-preparsed content, shared AST stores, or custom AST control.
   - Remember that `html-policy` now defaults to `safe`, and Mermaid strict mode is on by default through `mermaid-props`.
6. Validate with the smallest useful Vite dev or build command.

## Default Decisions

The rest: https://github.com/Simon-He95/markstream-vue/blob/HEAD/.agents/skills/markstream-vue2-vite/SKILL.md