@astrojs/ alpinejs
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:
npx astro add alpinejspnpm astro add alpinejsyarn astro add alpinejsSi 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.
npm install @astrojs/alpinejspnpm add @astrojs/alpinejsyarn add @astrojs/alpinejsLa mayoría de los gestores de paquetes también instalarán las dependencias de pares asociadas. Sin embargo, si ves una advertencia como Cannot find package 'alpinejs' (o similar) al iniciar Astro, tendrás que instalar Alpine.js manualmente:
npm install alpinejs @types/alpinejspnpm add alpinejs @types/alpinejsyarn add alpinejs @types/alpinejsLuego, aplica la integración a tu archivo astro.config.* usando la propiedad integrations:
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»Tipo: string
@astrojs/alpinejs@0.4.0
Puedes extender Alpine configurando la opción entrypoint con un especificador de importación relativo a la raíz (p. ej. 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, complementos y otras personalizaciones para casos de uso avanzados.
import { defineConfig } from 'astro/config';import alpinejs from '@astrojs/alpinejs';
export default defineConfig({ // ... integrations: [alpinejs({ entrypoint: '/src/entrypoint' })],});import type { Alpine } from 'alpinejs'import intersect from '@alpinejs/intersect'
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 añade y habilita automáticamente en cada página de tu sitio web, por lo que no se necesitan directivas de cliente. Añade los scripts de los complementos en el <head> de la página.
El siguiente ejemplo añade el complemento Collapse de Alpine para expandir y colapsar el texto de un párrafo:
------<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">Alternar contenido</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 al objeto global window. Para el autocompletado del IDE, añade lo siguiente a tu src/env.d.ts:
interface Window { Alpine: import('alpinejs').Alpine;}Ejemplos
Sección titulada «Ejemplos»- El ejemplo de Astro y Alpine.js muestra cómo usar Alpine.js en un proyecto de Astro.
