@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
Sección titulada InstalaciónAstro 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 y prueba los pasos de instalación manual a continuación.
Instalación manual
Sección titulada Instalación manualPrimero, 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 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/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 alpine from '@astrojs/alpinejs';
export default defineConfig({ // ... integrations: [alpine()],});Opciones de configuración
Sección titulada Opciones de configuraciónentrypoint
Sección titulada entrypointPuedes 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.
import { defineConfig } from 'astro/config';import alpine from '@astrojs/alpinejs';
export default defineConfig({ // ... integrations: [alpine({ 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 agrega y habilita automáticamente en cada página de tu sitio web por lo que no se necesitan directivas del cliente. 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:
------<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 TypeScriptLa 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:
interface Window { Alpine: import('alpinejs').Alpine;}Ejemplos
Sección titulada Ejemplos- El ejemplo Astro Alpine.js muestra como usar Alpine.js en un proyecto de Astro.
