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. Refs used in the template unwrap as usual.

<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.

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.