Markstream Vue 3

Visão Geral

Configure o renderizador Vue 3 além da instalação genérica: modos de exibição, ciclo de vida de streaming, renderização de código, virtualização de mensagens longas e substituições com escopo.

Quando Usar

Use para um aplicativo Vue 3 simples após a seleção do pacote. Use markstream-nuxt quando os limites específicos de Nuxt para SSR forem importantes.

Fluxo de Trabalho

Inspecione o gerenciador de pacotes existente, a versão do pacote instalado e as convenções do projeto. Uma integração com escopo solicitada já autoriza edições rotineiras de origem/dependência; busque aprovação apenas para uma expansão de escopo material ou decisão de adoção de beta/alfa não resolvida.

1. Confirme Vue 3 e não Nuxt. Instale apenas os peers solicitados e importe markstream-vue/index.css após os resets.
2. Comece com content. Use mode="chat" para streams de IA, docs para documentos ricos e minimal para superfícies leves que não sejam de chat.
3. Escolha a renderização de código delimitado explicitamente: pre sem um peer, shiki com stream-markdown, ou monaco com nome de compatibilidade suportado por stream-diffs.
4. Para chat ao vivo, use streaming suave auto, sem fade e com um cursor opcional. Ao concluir, mantenha o mesmo modo, defina final e desabilite o pacing/cursor.
5. Use nodes apenas para análise de worker ou propriedade de AST estrutural.
6. Para transcrições longas, mantenha um virtualizador de mensagens externas existente no controle. Use a altura lógica do Markstream em vez da altura do DOM montado.
7. Use o registro de componentes com escopo e preserve o HTML seguro e o modo estrito do Mermaid.
8. Valide o menor build/typecheck mais um stream incremental e um caso de mensagem longa.

Exemplo

<script setup lang="ts">
import MarkdownRender from 'markstream-vue'
import 'markstream-vue/index.css'

defineProps<{ content: string; isDone: boolean }>()
</script>

<template>
  <MarkdownRender
    mode="chat"
    :content="content"
    :final="isDone"
    :fade="isDone"
    :typewriter="!isDone"
    :smooth-streaming="isDone ? false : 'auto'"
    html-policy="safe"
  />
</template>

Limitações

• Peers opcionais adicionam custo de bundle e de runtime do navegador.
• O modo DOM-minimal desabilita recursos dependentes do wrapper.
• A integração de virtualização requer conteúdo estável e chaves de medição.

Notas de Segurança e Proteção

Revise as alterações de dependência. Nunca habilite HTML confiável ou renderização Mermaid solta para saída de modelo não confiável.

Verifique props, caminhos de exportação e intervalos de peers em relação ao pacote instalado, não a um upstream main mutável. Teste streams parciais e concluídos, Markdown malformado/não confiável, links e URLs de imagem, cancelamento e movimento reduzido. HTML seguro e diagramas estritos reduzem a exposição, mas não garantem por si só a privacidade de URL/rede ou as permissões de componentes do aplicativo.