Configure Vue 3 markdown streaming with chat modes

This skill configures the Vue 3 renderer beyond generic installation: surface modes, streaming lifecycle, code rendering, long-message virtualization, and scoped overrides, meant for a plain Vue 3 application once the package has already been selected. Its workflow: before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval; confirm Vue 3 and not Nuxt, install only the specifically requested peers, and import markstream-vue/index.css after resets; start with the content prop, using mode="chat" for AI streams, "docs" for rich documents, and "minimal" for lightweight non-chat surfaces; choose fenced-code rendering explicitly, either pre with no peer, shiki paired with stream-markdown, or the compatibility-named monaco backed by stream-diffs; for live chat use smooth streaming set to auto with no fade and an optional cursor, and on completion keep the same mode, set final, and disable pacing/cursor; use nodes only for worker parsing or structural AST ownership; for long transcripts let an existing outer message virtualizer stay in charge, using Markstream's logical height rather than mounted DOM height; use scoped component registration and preserve safe HTML and Mermaid strict mode; and validate with the smallest build/typecheck pass plus one incremental stream case and one long-message case.

Documented limitations: optional peers add bundle and browser-runtime cost, DOM-minimal mode disables wrapper-dependent features, and virtualization integration requires stable content and measurement keys. A security note: review dependency changes, and never enable trusted HTML or loose Mermaid rendering for untrusted model output.

Use for a plain Vue 3 application after the package has already been selected. Use markstream-nuxt instead when SSR-specific Nuxt boundaries matter.

Input is an existing plain Vue 3 application. Output is a working MarkdownRender integration with an explicit surface mode, a chosen code-rendering strategy, virtualization-compatible long-message handling, and HTML/Mermaid trust kept at safe defaults.

<script setup lang="ts">
import MarkdownRender from 'markstream-vue'
import 'markstream-vue/index.css'

defineProps<{ content: string; isDone: boolean }>()
</script>

<template>
  <MarkdownRender
    mode="chat"
    :content="content"
    :final="isDone"
    :fade="isDone"
    :typewriter="!isDone"
    :smooth-streaming="isDone ? false : 'auto'"
    html-policy="safe"
  />
</template>

Vue 3 developers configuring Markstream's streaming markdown renderer beyond a basic install - choosing surface mode, code-rendering strategy, and long-message virtualization.