@astrojs/alpinejs

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

Instalación rápida

La herramienta de línea de comandos astro add automatiza la instalación por ti. Ejecuta uno de los siguientes comandos en una nueva ventana de terminal. (Si no estás seguro de qué gestor de paquetes estás usando, ejecuta el primer comando.) Luego, sigue las instrucciones y escribe “y” en la terminal (es decir, “sí”) para cada uno.

# Usando NPM
npx astro add alpinejs
# Usando Yarn
yarn astro add alpinejs
# Usando PNPM
pnpm 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 usando tu gestor de paquetes. Si estás usando npm o no estás seguro, ejecuta esto en la terminal:

npm install @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

Luego, aplica esta 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:

<!-- 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>