Integrate Markdown streaming into Nuxt with SSR safety

This skill integrates markstream-vue into Nuxt while keeping hydration, browser-only peers, workers, and streaming behavior on the correct side of SSR boundaries. 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 Nuxt 3 or 4 and install only the specifically requested peers; put browser-only peers behind ClientOnly, .client plugins, dynamic imports, or guarded initialization; import markstream-vue/index.css explicitly from a client-safe shell or plugin; start with the content prop using mode="chat" for AI streams, "docs" for rich documents, and "minimal" for lightweight non-chat surfaces; keep smooth streaming in auto mode for SSR, never forcing it to true on first-screen server content; when a chat row completes, keep its mode stable, set final, disable pacing/cursor, and enable fade only if desired; keep HTML safe and Mermaid strict, putting optional code, diagram, and worker runtimes behind client boundaries; and validate with a build/typecheck pass, hydration check, and one incremental client update.

Documented limitations: browser-only peers cannot run during SSR, hydration depends on correct host plugin/component boundaries, and the skill does not configure deployment adapters. A security note: do not expose trusted HTML or loose Mermaid settings to untrusted model output, and review dependency and runtime-boundary changes.

Use for Nuxt 3 or 4 pages, components, or plugins. Use markstream-vue directly for non-Nuxt Vue applications, and markstream-install when the framework is not yet known.

Input is an existing Nuxt 3 or 4 application. Output is a working MarkdownRender integration correctly split across SSR/client boundaries, with browser-only peers guarded, streaming mode selected per surface, and HTML/Mermaid trust kept at safe defaults.

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

defineProps<{ markdown: string; done: boolean }>()
</script>

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

Nuxt 3/4 developers integrating Markstream's streaming markdown renderer who need to keep hydration and browser-only dependencies correctly scoped to the client side.