Suspense

useStream exposes hydrationPromise as a reactive ref. Await it from async setup() or gate your template on hydration finishing — Vue's built-in <Suspense> boundary can show a fallback while the initial thread snapshot loads.

Runnable example: The ui-vue app in the streaming cookbook demonstrates reconnect and replay with useStream.

Basic usage

<script setup lang="ts">
import { useStream } from "@langchain/vue";

const stream = useStream({
  assistantId: "agent",
  apiUrl: "http://localhost:2024",
  threadId: "t-42",
});

await stream.hydrationPromise.value;
</script>

<template>
  <ChatTranscript :messages="stream.messages" />
</template>

Wrap the consuming component in Vue's <Suspense> to render a fallback while hydration is in progress:

<template>
  <Suspense>
    <template #default>
      <Chat />
    </template>
    <template #fallback>
      <Spinner />
    </template>
  </Suspense>
</template>

Changing threadId installs a fresh hydrationPromise; re-await it when switching threads.

API reference