Saltearse al contenido

@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

Sección titulada 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:

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.

Instalación manual

Sección titulada Instalación manual

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()],
});

Opciones de configuración

Sección titulada Opciones de configuración

entrypoint

Sección titulada entrypoint

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'


export default (Alpine: Alpine) => {
    Alpine.plugin(intersect)
}

Uso

Sección titulada Uso

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>

Intellisense para TypeScript

Sección titulada Intellisense para TypeScript

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;
}

Ejemplos

Sección titulada Ejemplos

Más integraciones

Frameworks UI

Adaptadores SSR

Otras integraciones