markdown-it-vue-stream

A Vue component for rendering Markdown with markdown-it, supporting streaming rendering

📋 Project Status

⚠️ Development in Progress

This project is currently under active development and not yet ready for production use. Features may change, and there might be bugs or incomplete functionality.

🎯 Features

• Vue 3 Support: Built for modern Vue 3 applications
• Streaming Rendering: Avoid DOM jitter and state loss issues in incremental rendering
• Extensible: Based on markdown-it, supports all its plugins
• Customizable: Easy to configure and style
• TypeScript Support: Written in TypeScript for better type safety

📦 Installation

# Using npm
npm install markdown-it-vue-stream

# Using yarn
yarn add markdown-it-vue-stream

# Using pnpm
pnpm add markdown-it-vue-stream

🚀 Usage

Basic Usage

<template>
  <MarkdownItVueStream :content="markdownContent" />
</template>

<script setup>
import { ref } from 'vue'
import MarkdownItVueStream from 'markdown-it-vue-stream'

const markdownContent = ref(`# Hello World

This is a **Markdown** example with streaming rendering to avoid DOM jitter and state loss.

- Item 1
- Item 2
- Item 3
`)
</script>

📄 License

MIT License

🙏 Acknowledgements

• markdown-it - The Markdown parser
• Vue.js - The progressive JavaScript framework

Built with ❤️ for the Vue community