• English

      • Streaming Markdown in Vue 3

      Append incoming chunks to a reactive string and pass it to text. streaming controls unfinished syntax repair, smooth output and trailing effects.

      Connect a text stream

      This example consumes an async iterator of text. Decode SSE or other transport formats in your request layer:

      <script setup lang="ts">
import { Fluxdown } from '@fluxdown/vue';
import { ref } from 'vue';

const text = ref('');

const pending = ref(false);

async function read(chunks: AsyncIterable<string>) {
  text.value = '';

  pending.value = true;

  try {
    for await (const chunk of chunks) {
      text.value += chunk;
    }
  } finally {
    pending.value = false;
  }
}
</script>

<template>
  <Fluxdown :text="text" :streaming="pending" />
</template>

      Call read(chunks) after starting the request. Turn off streaming when the response ends. The component finishes any remaining smooth output before removing the trailing effect.

      Adjust the output

      streaming: true enables trailing repair, smooth output and the scale effect. Pass an object to configure each part:

      <script setup lang="ts">
import type { StreamingConfig } from '@fluxdown/vue';

import { Fluxdown } from '@fluxdown/vue';

type MessageProps = {
  text: string;
  pending: boolean;
};

const props = defineProps<MessageProps>();

const streaming: StreamingConfig = {
  repairEnding: true,
  smooth: true,
  effect: ['shad', { length: 3, maskWidth: 18 }],
};
</script>

<template>
  <Fluxdown :text="props.text" :streaming="props.pending && streaming" />
</template>
      OptionPurpose
      repairEndingRepair unfinished Markdown. Enabled by default.
      smoothReveal incoming content smoothly. Enabled by default.
      effectChoose a trailing effect. Defaults to scale; use false to disable it.

      Turn off smooth to keep the original chunk timing. See Core streaming for custom tickers and schedulers.

      Four trailing effects

      EffectPresentation
      scaleNew text sharpens as it grows to its final size.
      shadA gradient mask gently reveals the trailing text.
      chunkEach incoming chunk fades in. Use with smooth: false.
      suffixA trailing marker indicates that content is still arriving.

      For example, preserve network chunks and fade them in one at a time:

      <Fluxdown
  :text="text"
  :streaming="pending && { smooth: false, effect: 'chunk' }"
/>

      effect also accepts [name, options] or an array of effects. See configuration for details and Animation for demos of all four effects.

      Switch messages

      Give each message its own component and use the message identifier as its key. Vue creates fresh streaming state when a different message replaces it.

      <Fluxdown :key="message.id" :text="message.text" :streaming="message.pending" />