¿Por qué convertir ASTRO a VUE?
Astro y Vue son modelos de renderizado distintos: Astro pre-renderiza a HTML mientras que los componentes .vue dependen de la reactividad en tiempo de ejecución de Vue. Astro incluso admite Vue directamente, por lo que la gente suele incrustar Vue en lugar de convertir para salir de Astro.
Cómo convertir ASTRO a VUE
Usar Vue dentro de Astro FREE
Ejecuta npx astro add vue para añadir @astrojs/vue, luego importa y renderiza componentes .vue dentro de tus archivos .astro, hidratándolos con directivas client:*.
Reescritura manual a un SFC de .vue FREE
Mueve el marcado de .astro a un bloque <template> y la lógica de la valla de código a <script setup>, convirtiendo las props, slots y expresiones a sus equivalentes en Vue.
Acerca de estos formatos
Un archivo .astro es una plantilla de componente para el framework web Astro. Contiene marcado de estilo HTML más una sección opcional de script en JavaScript o TypeScript, y Astro lo…
Abrir detalles de .ASTRO →
.VUE
E-on Vue 3D Scene File
Un archivo .vue es una escena de paisaje 3D de E-on Vue (terreno, cielo, vegetación, iluminación) o un componente web de archivo único de Vue.js. Abra una escena 3D con Vue de Bentley…
Abrir detalles de .VUE →Calidad y qué observar
- La documentación de Astro señala que puedes usar componentes Vue dentro de Astro, pero no componentes Astro dentro de una base de código Vue.
- Vue utiliza directivas como
v-if,v-fory el enlace:propque no tienen una contraparte directa en Astro, por lo que cualquier reescritura es trabajo manual. - La valla de código solo para servidor de Astro y el modelo de hidratación
client:*no se mapean con la reactividad en tiempo de ejecución de Vue.
Preguntas frecuentes
¿Existe un convertidor de .astro a .vue?
¿Puedo ejecutar componentes Vue en un proyecto Astro?
@astrojs/vue añadida con npx astro add vue.¿Cómo se traducen los slots a Vue?
<slot> de Astro se convierte en el <slot> de Vue en un <template>, pero los slots con nombre y las props necesitan un mapeo manual.
