// Integrate markstream-vue into a Nuxt 3 or Nuxt 4 app. Use when Codex needs client-only boundaries, SSR-safe setup, browser-only peer gating, worker-aware initialization, or a safe `MarkdownRender` integration inside pages, components, or Nuxt plugins.
| name | markstream-nuxt |
| description | Integrate markstream-vue into a Nuxt 3 or Nuxt 4 app. Use when Codex needs client-only boundaries, SSR-safe setup, browser-only peer gating, worker-aware initialization, or a safe `MarkdownRender` integration inside pages, components, or Nuxt plugins. |
Use this skill when the host app is Nuxt and SSR boundaries matter.
markstream-vue plus only the optional peers required by the requested features.<client-only> wrappers, .client plugins, or guarded setup paths.markstream-vue/index.css from a client-safe app shell or plugin.content, and move to nodes plus final only when the UI needs custom AST control.
typewriter or :max-live-nodes="0" — smooth streaming (smooth-streaming="auto") paces visible output automatically.typewriter only controls the blinking cursor and defaults to false.fade controls node enter and streamed-text fade animations and defaults to true.:fade="false" to avoid delta fade stacking with high-commit pacing.MarkdownRender starts streaming and later switches to history when final=true.
smooth-streaming="auto", fade=false, typewriter=true. Smooth pacing handles gradual appearance; fade would flicker.smooth-streaming=false, fade=true, typewriter=false. Content is already complete — pacing would slow it down, but fade gives a polished entry animation.:smooth-streaming="isStreaming ? 'auto' : false", :fade="!isStreaming".smooth-streaming="true" on first-screen content; the mounted gate inside auto prevents hydration mismatch.html-policy now defaults to safe, and Mermaid strict mode is on by default through mermaid-props.auto mode (the default) because it gates on mount. Do not use smooth-streaming="true" for first-screen SSR content — it bypasses the mounted gate and can cause hydration mismatch or blank flash.html-policy="safe" and Mermaid strict mode unless the task is preserving trusted legacy rendering.html-policy="trusted" and :mermaid-props="{ isStrict: false }", and document why that surface is trusted.docs/nuxt-ssr.mddocs/guide/installation.mddocs/guide/usage.mddocs/guide/troubleshooting.mdIntegrate markstream-angular into an Angular app. Use when Codex needs standalone component imports, signal-based examples, CSS wiring, custom HTML tags or customComponents setup, or optional peer integration in an Angular repository.
Install and wire markstream-vue, markstream-react, markstream-vue2, markstream-angular, or markstream-svelte into an existing repository. Use when Codex needs to choose the right package, install the smallest peer-dependency set, fix CSS/reset order, decide between `content` and `nodes`, or add a minimal working renderer example.
Audit and migrate existing Markdown rendering to Markstream. Use when Codex needs to replace another renderer, classify direct vs custom vs plugin-heavy usage, preserve behavior during adoption, migrate custom renderers into scoped Markstream overrides, or decide when `nodes` streaming is worth adopting.
Integrate markstream-react into a React 18+ or Next app. Use when Codex needs to add the React renderer, import CSS correctly, choose between `content` and `nodes`, keep Next client boundaries safe, convert renderer overrides, or prepare a repo for `react-markdown` migration.
Integrate markstream-svelte in Svelte 5 apps. Svelte 4 unsupported.
Integrate markstream-vue into a Vue 3 app. Use when Codex needs to add the Vue 3 renderer, import CSS in the right order, choose between `content` and `nodes`, enable optional peers like Mermaid, KaTeX, D2, Monaco, or stream-markdown, or wire scoped custom components in a non-Nuxt Vue repository.