Vue 2 Quick Start

Get started with markstream-vue2 in your Vue 2 project.

Basic Setup

1. Installation

First, install the package:

pnpm add markstream-vue2

2. Import Styles

In your main entry file (e.g., main.js or main.ts):

import Vue from 'vue'
import App from './App.vue'
import 'markstream-vue2/index.css'

// For Vue 2.6.x, also install and configure @vue/composition-api
// import VueCompositionAPI from '@vue/composition-api'
// Vue.use(VueCompositionAPI)

new Vue({
  render: h => h(App)
}).$mount('#app')

3. Use the Component

<script>
import MarkdownRender from 'markstream-vue2'

export default {
  name: 'App',
  components: {
    MarkdownRender
  },
  data() {
    return {
      markdown: `# Hello Vue 2!

This is **markstream-vue2** - a streaming-friendly Markdown renderer for Vue 2.

## Features

- Code syntax highlighting
- Mermaid diagrams
- Math formulas
- And much more!

\`\`\`javascript
console.log('Hello from Vue 2!')
\`\`\`
`
    }
  }
}
</script>

<template>
  <div id="app">
    <MarkdownRender :content="markdown" />
  </div>
</template>

Using with Vue 2.7+ (Composition API)

Vue 2.7 includes built-in Composition API support:

<script>
import MarkdownRender from 'markstream-vue2'
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'App',
  components: {
    MarkdownRender
  },
  setup() {
    const markdown = ref(`# Hello Vue 2.7!

This uses the Composition API.

\`\`\`javascript
const message = 'Hello from Vue 2.7!'
console.log(message)
\`\`\`
`)
    return { markdown }
  }
})
</script>

<template>
  <div id="app">
    <MarkdownRender :content="markdown" />
  </div>
</template>

Using with Vue 2.6.x (@vue/composition-api)

For Vue 2.6.x, install @vue/composition-api:

pnpm add @vue/composition-api

import VueCompositionAPI from '@vue/composition-api'
// main.js
import Vue from 'vue'
import 'markstream-vue2/index.css'

Vue.use(VueCompositionAPI)

Then use it the same way as Vue 2.7:

<script>
import { defineComponent, ref } from '@vue/composition-api'
import MarkdownRender from 'markstream-vue2'

export default defineComponent({
  name: 'App',
  components: {
    MarkdownRender
  },
  setup() {
    const markdown = ref(`# Hello Vue 2.6!

This uses @vue/composition-api.
`)
    return { markdown }
  }
})
</script>

<template>
  <div id="app">
    <MarkdownRender :content="markdown" />
  </div>
</template>

Enabling Optional Features

Code Syntax Highlighting

Install dependencies:

pnpm add shiki stream-markdown

<script>
import MarkdownRender from 'markstream-vue2'

export default {
  components: { MarkdownRender },
  data() {
    return {
      markdown: `\`\`\`javascript
const hello = 'world'
console.log(hello)
\`\`\``
    }
  }
}
</script>

<template>
  <MarkdownRender :content="markdown" />
</template>

Mermaid Diagrams

Install mermaid:

pnpm add mermaid

Import styles and enable the loader:

import { enableMermaid } from 'markstream-vue2'
// main.js
import 'markstream-vue2/index.css'

enableMermaid()

<script>
import MarkdownRender from 'markstream-vue2'

export default {
  components: { MarkdownRender },
  data() {
    return {
      markdown: `#### Mermaid Diagram

\`\`\`mermaid
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Keep trying]
\`\`\``
    }
  }
}
</script>

<template>
  <MarkdownRender :content="markdown" />
</template>

Math Formulas (KaTeX)

Install katex:

pnpm add katex

Import styles and enable the loader:

import { enableKatex } from 'markstream-vue2'
// main.js
import 'markstream-vue2/index.css'

import 'katex/dist/katex.min.css'

enableKatex()

<script>
import MarkdownRender from 'markstream-vue2'

export default {
  components: { MarkdownRender },
  data() {
    return {
      markdown: `#### Math Example

Inline math: $E = mc^2$

Block math:

$$
\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}
$$`
    }
  }
}
</script>

<template>
  <MarkdownRender :content="markdown" />
</template>

Custom Components

You can customize how specific nodes are rendered using setCustomComponents:

<script>
import MarkdownRender, { setCustomComponents } from 'markstream-vue2'

// Create a custom heading component
const CustomHeading = {
  name: 'CustomHeading',
  props: ['node'],
  render(h) {
    const level = this.node.level || 1
    const Tag = `h${level}`
    return h(Tag, { class: 'custom-heading' }, this.node.children.map(c => c.content))
  }
}

export default {
  components: { MarkdownRender },
  data() {
    return {
      markdown: `# Custom Heading

This heading is rendered with a custom component.
`
    }
  },
  mounted() {
    // Register custom component
    setCustomComponents('my-app', {
      heading: CustomHeading
    })
  }
}
</script>

<template>
  <div>
    <MarkdownRender
      custom-id="my-app"
      :content="markdown"
    />
  </div>
</template>

<style scoped>
.custom-heading {
  color: #e11d48;
  border-bottom: 2px solid #e11d48;
  padding-bottom: 0.5rem;
}
</style>

Streaming Content

markstream-vue2 supports streaming markdown content, which is useful for AI-generated content:

<script>
import MarkdownRender from 'markstream-vue2'

export default {
  components: { MarkdownRender },
  data() {
    return {
      markdown: '',
      fullText: `# Streaming Demo

This content is being streamed **character by character**.

## Features

1. Progressive rendering
2. No layout shift
3. Smooth animations

\`\`\`javascript
const streaming = true
console.log('Streaming enabled:', streaming)
\`\`\`
`
    }
  },
  methods: {
    startStreaming() {
      this.markdown = ''
      let i = 0
      const interval = setInterval(() => {
        if (i < this.fullText.length) {
          this.markdown += this.fullText[i]
          i++
        }
        else {
          clearInterval(interval)
        }
      }, 20)
    }
  }
}
</script>

<template>
  <div>
    <button @click="startStreaming">
      Start Streaming
    </button>
    <MarkdownRender :content="markdown" />
  </div>
</template>

VitePress Integration (Vue 2)

For VitePress with Vue 2, you can use markstream-vue2 in your custom theme:

import MarkdownRender, { setCustomComponents } from 'markstream-vue2'
// docs/.vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import 'markstream-vue2/index.css'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    // Register the component globally
    app.component('MarkdownRender', MarkdownRender)

    // Set custom components if needed
    setCustomComponents('vitepress', {
      // Your custom components here
    })
  }
}

Next Steps

• Explore Components documentation for all available components
• Check out API Reference for detailed API documentation
• See Examples for more usage examples