Para agregar automáticamente Vue en Astro:
npx astro add vue
¿Qué es Astro?
Conoce los proyectos que vas a construir
¿Qué es Astro?
Quiz: ¿Qué es Astro?
Primeros Pasos
Entorno de trabajo y estructura en Astro
Crear tu primera página web con Astro
Proyecto
Breve historia de los frameworks y librerías
Conoce tu proyecto colaborativo: astrobuild.tips
Configuración de Tailwind CSS
Configuración de TypeScript
GitHub, VSCode, Prettier, Astro config
Astro API
Componentes en Astro
Páginas en Astro
Plantillas en Astro
Markdown
MDX
Enrutamiento: rutas estáticas
Enrutamiento: rutas dinámicas
Creando template de nuestra página de entrada del blog
Quiz: Astro API
Astro Islands
Componentes en React: header
Componentes en Vue: footer
Componentes en Svelte: redes sociales
Patrones de diseño: Astro Islands
Quiz: Astro Islands
Deploy
Integraciones SEO, RSS, Sitemap
Desplegar en Cloudflare Pages
Quiz: Deploy
Bonus
Bonus: aplica mejoras a tu proyecto
Cierre
Conclusiones y cierre del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Componentes en Vue: footer
19/25Recursos
Aportes 6
Preguntas 1
Ordenar por:
damm bro next chapter
npx astro add php
Hace falta la página de HyperUI en la sección de recursos. 😁
fulll … excelnte
Vue Integration
📌 Enlaces importantes
@astrojs/vue
Framework Components
Astro soporta una variedad amplia de Frameworks y librerías populares de JavaScript.
.
Su integración es sencilla mediante el uso del binario por comando astro add , lo cual dependiendo de la herramienta a instalar, nos habilitará su personalización dentro del archivo global de configuración de Astro astro.config .
.
Usando componentes
Emplear un componente de una tecnología determinada, no es diferente a los componentes nativos de Astro. Lo que nos beneficia por su facilidad por integración en páginas (pages), estructuras (Layouts) o como parte de otros componentes (components), siempre y cuando estén contenidos en el subdirectorio ./src/components .
.
Para su uso, se importan el componente en su correspondiente destino y ¡Listo!:
---
import Login from '../components/Login.jsx';
---
<html>
<body>
<h1>Hello React 👋</h1>
<Login />
</body>
</html>
.
✨ Concepto clave
Por default, los componentes externos a Astro solo se representarán en el servidor, como HTML estático, para seguir fiel al concepto de Hidratación Selectiva de Astro.
.
Hidratación de componentes interactivos
Para habilitar la interacción de un componente de Framework o librería diferente de Astro, se emplea la directiva client:* .
.
✨ Concepto clave
Con excepción de la directivaclient:only, todo componente se procesará en el servidor para la generación del sitio web.
.
El componente que no se necesite ser procesado por el servidor, debido a su interacción, será enviado al cliente (navegador). Si dos o más componentes en una página usan la misma herramienta, el código necesario de JavaScript solo se enviará una vez.
.
Existen varias directivas disponibles: client:load, client:idle, client:visible, client:media={QUERY} y client:only={FRAMEWORK} .
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?