No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Componentes en Vue: footer

19/25
Recursos

Aportes 6

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Para agregar autom谩ticamente Vue en Astro:

npx astro add vue
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 directiva client: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} .