Vue

@smoothstream/vue is the Vue 3 adapter. It drives the shared engine through Vue’s lifecycle and turns presentation snapshots into keyed VNodes.

npm install @smoothstream/vue

pnpm add @smoothstream/vue

yarn add @smoothstream/vue

bun add @smoothstream/vue

Peer dependency: vue 3.5 or later. Reveal CSS and the default prose theme import automatically. The same component works in Vue SSR and Nuxt; you do not need a Nuxt module.

Bind the markdown prop

Vue uses an explicit markdown prop instead of slot children. Markdown is input data that the component parses; a Vue slot supplies renderable VNodes rather than that raw string. Refs used in the template unwrap as usual, and any string-valued prop, store value, or computed expression works too.

<script setup lang="ts">import { Smoothstream } from "@smoothstream/vue"; defineProps<{  text: string;  receiving: boolean;}>();</script> <template>  <Smoothstream    class="assistant-markdown"    :markdown="text"    :receiving="receiving"  /></template>

inheritAttrs is false, but fallthrough attributes such as class and style are merged onto the Markdown root. In templates, multi-word props use kebab-case (:code-highlighter, :reduced-motion).

Chat messages

<template>  <Smoothstream    v-for="message in history"    :key="message.id"    :markdown="message.content"    mode="static"  />  <Smoothstream    :key="active.id"    :markdown="active.content"    :receiving="active.receiving"  /></template>

When receiving becomes false, leave that streaming instance mounted until presentation finishes. Moving it to another history subtree can recreate it. The complete streaming example shows request cancellation, errors, and unmount cleanup.

Completion events

Listen for @reveal-complete when the final presentation unit begins appearing, or @presentation-complete after all entrances and reveal-node compaction finish. Both emit once after receiving becomes false. See Completion callbacks for the timing details and a two-stream handoff example.

SSR and Nuxt

mode="static" emits settled semantic HTML on the server and hydrates that markup in place.

In streaming mode with reducedMotion="system" (the default), the server and first hydration share an empty motion-pending shell. The browser then reads prefers-reduced-motion before Markdown appears. Forced "always" and "never" policies are deterministic during SSR.

Image loading, syntax highlighting, and clipboard copy begin after mount.

Timing props reset the session

Changing interval, duration, mode, or reveal rebuilds the underlying session. Set them per response rather than updating them while a stream is in flight.

Full option list: API.