@ai-markdown/vue

@ai-markdown/vue

Documentation · Examples · Website

Render Markdown as Vue VNodes, including streaming responses, shared references, scoped slots and smooth reveal. The adapter shares parsing with React while following Vue's component and lifecycle APIs.

Requirements and dependencies

• Vue ^3.5.0, including useId() for server/hydration identity.
• Node ^20.19.0 || >=22.12.0 for server/build consumers.
• ESM and CJS with TypeScript declarations. Core and engine are exact-version dependencies; applications do not install them separately.
• KaTeX is an optional peer. Install it directly when importing its stylesheet for math.
• See the full environment and browser requirements for browser APIs and verification scope.

Installation

pnpm add @ai-markdown/vue vue@^3.5.0 katex

Minimal component

<script setup lang="ts">
import { ref } from 'vue';
import AIMarkdown from '@ai-markdown/vue';
import '@ai-markdown/vue/styles.css';
import 'katex/dist/katex.min.css';

const content = ref('# Answer\n\n**Markdown**, $x^2$ and 中文.');
</script>

<template>
  <AIMarkdown :content="content" />
</template>

Pass the complete accumulated string as content. Your application owns transport framing, cancellation and retries. The base stylesheet supplies code/table layout and cursor animation; KaTeX CSS is separate.

Vue uses components and named element slots for customization. It has no React context hooks, blockMemo prop, React typography variants or Mantine integration. Nuxt-specific packaging and KeepAlive/Suspense combinations require separate integration coverage.

A standalone AIMarkdown defaults preserveOrphanReferences to false. Inside AIMarkdownDocuments the wrapper's own preserveOrphanReferences prop (default true) applies to every chunk and wins over the chunk's prop, so a footnote definition whose reference never arrives stays in the document footer. Both adapters resolve the wrapper value first; standalone React defaults to true, while standalone Vue defaults to false.

Documentation

• Component and composable reference.
• Streaming: reactive input, smooth reveal and live getters.
• Documents and references: sections, ordering and isolation.
• Custom rendering and styling.
• SSR and lifecycle: hydration and mounted contributions.

The independent site owns the detailed API and guides. This README provides the package's minimal installation and usage path.

License

MIT

Optional diagram engines

Mermaid remains the default; Pele and Ondine are optional adapters. Set mermaidEngine to a loader or false to disable diagrams. Normal entries default to Mermaid fallback only for an identified unsupported type; mermaidFallback: false disables it. Engine-specific options belong to createPeleLoader / createOndineLoader.

Use components/code/independent to supply an engine without importing Mermaid. React/Vue expose useDiagram and DiagramViewport at components/diagram. Mantine's independent entry exports createMantineAIMarkdown for the same dependency isolation. See the complete guide for setup, themes, lifetime contracts and support boundaries.