Markstream Nuxt

---
name: markstream-nuxt
description: "Integrate markstream-vue into Nuxt 3 or 4 with SSR-safe client boundaries, renderer modes, explicit CSS, and browser-only optional peers."
allowed-tools: "[claude, cursor, gemini, codex]"
category: frontend-and-design
source_repo: sickn33/agentic-awesome-skills
source_path: "skills/markstream-nuxt/SKILL.md"
source_url: https://github.com/sickn33/agentic-awesome-skills/blob/HEAD/skills/markstream-nuxt/SKILL.md
---


# Markstream Nuxt

## Overview

Integrate `markstream-vue` into Nuxt while keeping hydration, browser-only peers, workers, and streaming behavior on the correct side of SSR boundaries.

## When to Use

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

## Workflow

Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.

1. Confirm Nuxt 3 or 4 and install only requested peers.
2. Put browser-only peers behind `<ClientOnly>`, `.client` plugins, dynamic imports, or guarded initialization.
3. Import `markstream-vue/index.css` explicitly from a client-safe shell or plugin.
4. Start with `content`: `mode="chat"` for AI streams, `docs` for rich documents, and `minimal` for lightweight non-chat surfaces.
5. Keep smooth streaming in `auto` mode for SSR; do not force `true` on first-screen server content.
6. When a chat row completes, keep its mode stable, set `final`, disable pacing/cursor, and enable fade only if desired.
7. Keep HTML safe and Mermaid strict. Put optional code, diagram, and worker runtimes behind client boundaries.
8. Validate build/typecheck, hydration, and one incremental client update.

## Example

```vue
<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>
```

## Limitations

- Browser-only peers cannot run during SSR.
- Hydration depends on correct host plugin/component boundaries.
- This skill does not configure deployment adapters.

## Security & Safety Notes

Do not expose trusted HTML or loose Mermaid settings to untrusted model output. Review dependency and runtime-boundary changes.

---

**Source:** [`sickn33/agentic-awesome-skills`](https://github.com/sickn33/agentic-awesome-skills) → `skills/markstream-nuxt/SKILL.md`

**Also appears in:** `sickn33/agentic-awesome-skills/plugins/agentic-awesome-skills/skills/markstream-nuxt/SKILL.md`, `sickn33/agentic-awesome-skills/plugins/agentic-awesome-skills-claude/skills/markstream-nuxt/SKILL.md`