Saltearse al contenido

@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.

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:

Ventana de terminal
npx 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.

Primero, instala el paquete @astrojs/alpinejs.

Ventana de 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:

Ventana de terminal
npm install alpinejs @types/alpinejs

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

astro.config.mjs
import { defineConfig } from 'astro/config';
import alpine from '@astrojs/alpinejs';
export default defineConfig({
// ...
integrations: [alpine()],
});

Puedes extender Alpine estableciendo la opción entrypoint en un especificador de importación relativo a la raíz (por ejemplo, entrypoint: "/src/entrypoint").

El export por defecto de este archivo debe ser una función que acepte una instancia de Alpine antes de iniciar. Esto permite el uso de directivas personalizadas, complementos y otras personalizaciones para casos de uso avanzados.

astro.config.mjs
import { defineConfig } from 'astro/config';
import alpine from '@astrojs/alpinejs';
export default defineConfig({
// ...
integrations: [alpine({ entrypoint: '/src/entrypoint' })],
});
src/entrypoint.ts
import type { Alpine } from 'alpinejs'
import intersect from '@alpinejs/intersect'
<!-- Ejemplo: Carga AlpineJS en una página. -->
<script>
import Alpine from 'alpinejs';
export default (Alpine: Alpine) => {
Alpine.plugin(intersect)
}

Una vez instalada la integración, puedes usar las directivas y la sintaxis de Alpine.js dentro de cualquier componente de Astro. El script de Alpine.js se agrega y habilita automáticamente en cada página de tu sitio web. Agrega scripts de complementos a la etiqueta <head> de la página.

El siguiente ejemplo agrega el plugin Collapse de Alpine para expandir y contraer el texto del párrafo:

src/pages/index.astro
---
---
<html>
<head>
<!-- ... -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<!-- ... -->
<div x-data="{ expanded: false }">
<button @click="expanded = ! expanded">Toggle Content</button>
<p id="foo" x-show="expanded" x-collapse>
Lorem ipsum
</p>
</div>
</body>
</html>

La integración @astrojs/alpine agrega Alpine al objeto global de la ventana. Para el autocompletado del IDE, agrega lo siguiente a tu src/env.d.ts:

src/env.d.ts
interface Window {
Alpine: import('alpinejs').Alpine;
}

Más integraciones

Frameworks UI

Adaptadores SSR

Otras integraciones