Saltar al contenido

@astrojs/ alpinejs

v1.0.0 GitHub npm Registro de cambios

Esta integración de Astro añade 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 la terminal
npx astro add alpinejs

Si tienes algún problema, no dudes en informarnos en GitHub e intenta 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 la terminal
npm install @astrojs/alpinejs

La mayoría de los gestores de paquetes también instalarán las dependencias del mismo nivel asociadas. Sin embargo, si ves una advertencia de Cannot find package 'alpinejs' (o similar) al iniciar Astro, tendrás que instalar manualmente Alpine.js tú mismo:

Ventana de la 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 alpinejs from '@astrojs/alpinejs';


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

Opciones de configuración

Sección titulada «Opciones de configuración»

entrypoint

Sección titulada «entrypoint»

Type: string

Agregado en: @astrojs/alpinejs@0.4.0

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

La exportación por defecto de este archivo debe ser una función que acepte una instancia de Alpine antes de iniciarse. Esto permite el uso de directivas personalizadas, plugins y otras personalizaciones para casos de uso avanzados.

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


export default defineConfig({
  // ...
  integrations: [alpinejs({ 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, por lo que no se necesitan directivas de cliente. Agrega scripts de plugins a la página <head>.

El siguiente ejemplo agrega el plugin Collapse de Alpine para expandir y contraer texto de 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 añade Alpine a el objeto window global. Para el autocompletado del IDE, añade 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 de front-end

Adaptadores

Otras integraciones

Contribuir Comunidad Patrocinar