Markstream Nuxt

Visão Geral

Integre markstream-vue no Nuxt mantendo a hidratação, peers exclusivos do navegador, workers e comportamento de streaming no lado correto das fronteiras SSR.

Quando Usar

Use para páginas, componentes ou plugins do Nuxt 3 ou 4. Use markstream-vue para aplicações Vue não-Nuxt e markstream-install quando o framework ainda não é conhecido.

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 solicitado já autoriza edições rotineiras de fonte/dependência; busque aprovação apenas para uma expansão de escopo material ou decisão de adoção beta/alfa não resolvida.

1. Confirme Nuxt 3 ou 4 e instale apenas os peers solicitados.
2. Coloque os peers exclusivos do navegador atrás de <ClientOnly>, plugins .client, importações dinâmicas ou inicialização protegida.
3. Importe markstream-vue/index.css explicitamente de um shell ou plugin seguro para o cliente.
4. Comece com content: mode="chat" para streams de IA, docs para documentos ricos e minimal para superfícies leves que não são de chat.
5. Mantenha o streaming suave no modo auto para SSR; não force true no conteúdo do servidor da primeira tela.
6. Quando uma linha de chat for concluída, mantenha seu modo estável, defina final, desabilite o ritmo/cursor e habilite o fade apenas se desejado.
7. Mantenha o HTML seguro e o Mermaid estrito. Coloque runtimes opcionais de código, diagramas e workers atrás das fronteiras do cliente.
8. Valide a compilação/verificação de tipos, a hidratação e uma atualização incremental do cliente.

Exemplo

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

defineProps<{ markdown: string; done: boolean }>()
</script>

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

Limitações

• Peers exclusivos do navegador não podem ser executados durante o SSR.
• A hidratação depende de fronteiras corretas de plugin/componente host.
• Esta habilidade não configura adaptadores de implantação.

Notas de Segurança e Proteção

Não exponha HTML confiável ou configurações soltas do Mermaid à saída de modelos não confiáveis. Revise as alterações de dependência e de fronteira de runtime.

Verifique props, caminhos de exportação e intervalos de peers contra o pacote instalado, não um "main" upstream mutável. Teste streams parciais e concluídos, Markdown malformado/não confiável, links e URLs de imagem, cancelamento e redução de movimento. HTML seguro e diagramas estritos reduzem a exposição, mas não impõem sozinhos a privacidade de URL/rede ou as permissões de componentes da aplicação.