Zum Inhalt springen

@astrojs/ alpinejs

Diese Astro-Integration erlaubt dir, Alpine.js hinzuzufügen, sodass du Alpine.js überall auf deiner Seite verwenden kannst.

Astro 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 Projektstamm­verzeichnis aus und folge den Anweisungen:

Terminal-Fenster
npx astro add alpinejs

Wenn du auf Probleme stößt, kannst du sie uns gerne auf GitHub melden und versuche stattdessen die manuellen Installationsschritte unten.

Als Erstes musst du das @astrojs/alpinejs-Paket installieren.

Terminal-Fenster
npm install @astrojs/alpinejs

Die 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:

Terminal-Fenster
npm install alpinejs @types/alpinejs

Wende dann die Integration auf die Datei astro.config.* an, indem du die Eigenschaft integrations verwendest:

astro.config.mjs
import { defineConfig } from 'astro/config';
import alpine from '@astrojs/alpinejs';
export default defineConfig({
// ...
integrations: [alpine()],
});

Du 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.

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

Sobald 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:

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>

`

Die @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:

src/env.d.ts
interface Window {
Alpine: import('alpinejs').Alpine;
}

Weitere Integrationen

UI-Frameworks

SSR-Adapter

Sonstiges

Contribute

Worum geht es?

Community