Por que converter ASTRO para VUE?
Astro e Vue são modelos de renderização separados - o Astro pré-renderiza para HTML enquanto os componentes .vue dependem da reatividade de tempo de execução do Vue. O Astro até suporta o Vue diretamente, então as pessoas geralmente incorporam o Vue em vez de converter para fora do Astro.
Como converter ASTRO para VUE
Usar Vue dentro do Astro FREE
Execute npx astro add vue para adicionar @astrojs/vue, depois importe e renderize componentes .vue dentro de seus arquivos .astro, hidratando-os com diretivas client:*.
Reescrita manual para um SFC .vue FREE
Mova a marcação do .astro para um bloco <template> e a lógica da cerca de código para <script setup>, convertendo props, slots e expressões para equivalentes do Vue.
Sobre estes formatos
Um arquivo .astro é um modelo de componente para a estrutura web Astro. Ele contém marcação no estilo HTML, além de uma seção opcional de script JavaScript ou TypeScript, e o Astro o…
Abrir detalhes de .ASTRO →Um arquivo .vue é uma cena de paisagem 3D do E-on Vue (terreno, céu, vegetação, iluminação) ou um componente web de arquivo único do Vue.js. Abra uma cena 3D com o Vue da Bentley Systems,…
Abrir detalhes de .VUE →Qualidade e o que observar
- A documentação do Astro observa que você pode usar componentes Vue dentro do Astro, mas não componentes Astro dentro de uma base de código Vue.
- O Vue usa diretivas como
v-if,v-fore vinculação:propque não têm contraparte direta no Astro, portanto qualquer reescrita é um trabalho manual. - A cerca de código exclusiva do servidor do Astro e o modelo de hidratação
client:*não se mapeiam na reatividade de tempo de execução do Vue.
Perguntas frequentes
Existe um conversor de .astro para .vue?
Posso executar componentes Vue em um projeto Astro?
@astrojs/vue adicionada com npx astro add vue.Como os slots se traduzem para o Vue?
<slot> do Astro torna-se o <slot> do Vue em um <template>, mas slots nomeados e props precisam de mapeamento manual.