@astrojs/ alpinejs
Diese Astro-Integration erlaubt dir, Alpine.js hinzuzufügen, sodass du Alpine.js überall auf deiner Seite verwenden kannst.
Installation
Abschnitt betitelt InstallationAstro enthält einen astro add-Befehl, um die Einrichtung offizieller Integrationen zu automatisieren. Wenn du es bevorzugst, kannst du die Integrationen stattdessen auch manuell installieren.
Um @astrojs/alpinejs zu installieren, führe den folgenden Befehl in deinem Projektstammverzeichnis aus und folge den Anweisungen:
npx astro add alpinejspnpm astro add alpinejsyarn astro add alpinejsWenn du auf Probleme stößt, kannst du sie uns gerne auf GitHub melden und versuche stattdessen die manuellen Installationsschritte unten.
Manuelle Installation
Abschnitt betitelt Manuelle InstallationAls Erstes musst du das @astrojs/alpinejs-Paket installieren.
npm install @astrojs/alpinejspnpm add @astrojs/alpinejsyarn add @astrojs/alpinejsDie meisten Paketmanager installieren auch die zugehörigen Peer-Abhängigkeiten. Wenn du jedoch beim Starten von Astro die Warnung “Cannot find package ‘alpinejs’” (oder eine ähnliche Meldung) erhältst, musst du Alpine.js manuell installieren:
npm install alpinejs @types/alpinejspnpm add alpinejs @types/alpinejsyarn add alpinejs @types/alpinejsWende dann die Integration auf die Datei astro.config.* an, indem du die Eigenschaft integrations verwendest:
import { defineConfig } from 'astro/config';import alpine from '@astrojs/alpinejs';
export default defineConfig({ // ... integrations: [alpine()],});Konfiguration
Abschnitt betitelt Konfigurationentrypoint
Abschnitt betitelt entrypointDu kannst Alpine erweitern, indem du die Option entrypoint auf einen root-relativen Import-Spezifizierer setzt (z.B. entrypoint: "/src/entrypoint").
Der Standard-Export dieser Datei sollte eine Funktion sein, die eine Alpine-Instanz vor dem Start akzeptiert. Dies ermöglicht die Verwendung von benutzerdefinierten Direktiven, Plugins und anderen Anpassungen für erweiterte Anwendungsfälle.
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)}Anwendung
Abschnitt betitelt AnwendungSobald die Integration installiert ist, kannst du Alpine.js-Direktiven und Syntax in jeder Astro-Komponente verwenden. Das Alpine.js-Skript wird automatisch hinzugefügt und auf jeder Seite deiner Website aktiviert. Füge das Plugin-Skripte in das <head>-Element der Seite ein.
Das folgende Beispiel fügt Alpines Collapse-Plugin hinzu, um Absatztext ein- und auszublenden:
------<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 für TypeScript
Abschnitt betitelt Intellisense für TypeScriptDie @astrojs/alpine-Integration fügt Alpine zum globalen window-Objekt hinzu. Für die IDE-Autovervollständigung, füge das Folgende zu src/env.d.ts hinzu:
interface Window { Alpine: import('alpinejs').Alpine;}Beispiele
Abschnitt betitelt Beispiele- Das Astro-Alpine.js-Beispiel zeigt, wie man Alpine.js in einem Astro-Projekt verwendet.
