@astrojs/ alpinejs

v0.4.0 GitHub npm Changelog

Esta integración de Astro agrega Alpine.js a tu proyecto para que puedas usar Alpine.js en cualquier lugar de tu página.

Instalación

Astro incluye un comando astro add para automatizar la configuración de las integraciones oficiales. Si lo prefieres, puedes instalar las integraciones manualmente en su lugar.

Para instalar @astrojs/alpinejs, ejecuta lo siguiente desde el directorio de tu proyecto y sigue las instrucciones:

npx astro add alpinejs

pnpm astro add alpinejs

yarn astro add alpinejs

Si tienes algún problema, no dudes en informarnos en GitHub y prueba los pasos de instalación manual a continuación.

Instalación manual

Primero, instala el paquete @astrojs/alpinejs.

npm install @astrojs/alpinejs

pnpm add @astrojs/alpinejs

yarn add @astrojs/alpinejs

La mayoría de los gestores de paquetes también instalarán las dependencias asociadas. Sin embargo, si ves un aviso “No se puede encontrar el paquete ‘alpinejs’” (o similar) al iniciar Astro, deberás instalar manualmente Alpine.js:

npm install alpinejs @types/alpinejs

pnpm add alpinejs @types/alpinejs

yarn add alpinejs @types/alpinejs

Luego, aplica la integración a tu archivo astro.config.* usando la propiedad integrations:

import { defineConfig } from 'astro/config';
import alpine from '@astrojs/alpinejs';

export default defineConfig({
  // ...
  integrations: [alpine()],
});

Uso

Una vez que la integración está instalada, puedes usar las directivas y sintaxis de Alpine.js dentro de cualquier componente Astro. El script de Alpine.js se agrega y habilita automáticamente en cada página de tu sitio web.

Revisa nuestra documentación de integraciones de Astro para obtener más información sobre las integraciones.

Limitaciones

La integración de Alpine.js no te da control sobre cómo se carga o inicializa el script. Si requieres este control, considera instalar y usar Alpine.js manualmente. Astro admite todas las instrucciones de configuración manual de Alpine.js oficialmente documentadas, usando etiquetas <script> dentro de un componente Astro.

Actualmente no es posible extender Alpine.js al usar este componente. Si necesitas esta función, considera seguir la configuración manual de Alpine.js en su lugar usando una etiqueta de script de Astro:

---
// src/pages/index.astro
---

<!-- Ejemplo: Carga AlpineJS en una sola página. -->
<script>
  import Alpine from 'alpinejs';

  // Opcional: Extiende Alpine.js
  // Alpine.directive('foo', ...)

  window.Alpine = Alpine;
  Alpine.start();
</script>