markstream-nuxt

Markstream Nuxt

Use this skill when the host app is Nuxt and SSR boundaries matter.

Workflow

1. Confirm the repo is Nuxt 3 or 4.
2. Install markstream-vue plus only the optional peers required by the requested features.
3. Keep browser-only peers behind client-only boundaries.
   • Prefer <client-only> wrappers, .client plugins, or guarded setup paths.
4. Import markstream-vue/index.css from a client-safe app shell or plugin.
   • The root JS import does not inject styles; use markstream-vue/index.css or markstream-vue/index.px.css explicitly.
5. Start with content, choose the renderer mode by surface, and move to nodes plus final only when the UI needs custom AST control.
   • Use mode="chat" for AI chat or SSE output. It uses lightweight batches, fade=false, and max-live-nodes=0; smooth-streaming="auto" paces visible output.
   • Use mode="docs" for rich document surfaces. It is the default and enables larger batches, tooltips, and fade.
   • Use mode="minimal" for lightweight non-chat surfaces.
   • Regular fenced code uses the built-in renderer, enhanced by stream-diffs when the optional peer is installed. Use render-code-blocks-as-pre for a forced plain path or setCustomComponents(customId, { code_block: ... }) for a scoped application-owned renderer.
   • typewriter only controls the blinking cursor and defaults to false. Prefer typewriter="simple" for high-frequency chat.
   • When overriding mode defaults on a high-frequency stream, pair smooth streaming with :fade="false" to avoid delta fade stacking with high-commit pacing.
   • Streaming vs recovering history: in chat UIs the same MarkdownRender starts streaming and later switches to history when final=true.
     • Streaming: mode="chat", smooth-streaming="auto", :fade="false", typewriter=true.
     • Recovering/completed chat history: keep mode="chat" on the same chat row; use :smooth-streaming="false", typewriter=false, and only set :fade="true" when the host explicitly wants a history-entry animation.
     • Use mode="minimal" for lightweight non-chat recovered content, and use mode="docs" only for rich document surfaces.
   • In SSR, avoid smooth-streaming="true" on first-screen content; the mounted gate inside auto prevents hydration mismatch.
   • Remember that html-policy now defaults to safe, and Mermaid strict mode is on by default through mermaid-props.
6. Validate with the smallest relevant Nuxt dev, build, or typecheck command.