Zum Inhalt springen

@astrojs/ alpinejs

v0.4.0 GitHub npm Changelog

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

Installation

Abschnitt betitelt Installation

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.

Manuelle Installation

Abschnitt betitelt Manuelle Installation

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()],
});

Konfiguration

Abschnitt betitelt Konfiguration

entrypoint

Abschnitt betitelt entrypoint

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

Anwendung

Abschnitt betitelt Anwendung

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>

`

Intellisense für TypeScript

Abschnitt betitelt Intellisense für TypeScript

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

Beispiele

Abschnitt betitelt Beispiele

Weitere Integrationen

UI-Frameworks

SSR-Adapter

Sonstiges