markstream-vue

Render Markdown with streaming support in Vue 3 applications.

2.9k|175|Updated May 22, 2025
One-click install
npx skills add https://github.com/Simon-He95/markstream-vue --skill markstream-vue
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: markstream-vue
Source: https://github.com/Simon-He95/markstream-vue/tree/main/.agents/skills/markstream-vue
Command: npx skills add https://github.com/Simon-He95/markstream-vue --skill markstream-vue

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This integration simplifies embedding a robust Markdown renderer with streaming capabilities into a Vue 3 application, reducing boilerplate and enabling real-time previews.

Core Features & Use Cases

  • Streaming Markdown rendering in Vue 3 applications with live updates.
  • Optional peers like Mermaid, KaTeX, D2, Monaco, or stream-markdown support.
  • Proper CSS order: import markstream-vue/index.css after resets to ensure styles load correctly.
  • Wire scoped custom components in non-Nuxt Vue repos for per-app customization and isolation.

Quick Start

Install markstream-vue in your Vue 3 project, import markstream-vue/index.css after resets, and render with <MarkdownRender :content="markdown" /> (switch to nodes for streaming when needed).

Frequently Asked Questions about markstream-vue

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render streaming Markdown in a Vue 3 application?

To render streaming Markdown in a Vue 3 application, install markstream-vue, import its CSS after resets, and use the MarkdownRender component with your content to enable live updates.

Do I need to install Mermaid or KaTeX separately to use streaming Markdown in Vue 3?

Mermaid, KaTeX, D2, Monaco, and stream-markdown are optional peers for Vue 3 Markdown streaming, meaning you only install them if your specific application requires their rendering capabilities.

How do I import CSS correctly for a Vue 3 Markdown renderer?

To import CSS correctly for a Vue 3 Markdown renderer, ensure you import markstream-vue/index.css after your CSS resets so that styling overrides load in the proper order.

Can I wire scoped custom components for Markdown rendering in a non-Nuxt Vue 3 project?

Yes, you can wire scoped custom components for Markdown rendering in a non-Nuxt Vue 3 project to achieve per-app customization and component isolation during streaming updates.

What is the best way to display real-time Markdown previews using Vue 3?

The best way to display real-time Markdown previews in Vue 3 is using a streaming renderer like markstream-vue, which simplifies embedding and enables live updates without boilerplate.