Integrationen nutzen

Astro-Integrationen ermöglichen es dir, mit nur wenigen Zeilen Code neue Funktionen und Verhaltensweisen zu deinem Projekt hinzuzufügen. Du kannst eine Integration selbst schreiben, eine offizielle Integration verwenden oder Integrationen aus der Community nutzen.

Integrationen können…

• React, Vue, Svelte, Solid und andere beliebte UI-Frameworks nutzbar machen.
• Tools wie Tailwind und Partytown mit wenigen Zeilen Code integrieren.
• Neue Features zu deinem Projekt hinzufügen, wie z.B. automatische Sitemap-Generierung.
• Eigenen Code schreiben, der sich in den Erzeugungsprozess, den Entwicklungs-Server und mehr einhängen lässt.

Offizielle Integrationen

Abschnitt betitelt Offizielle Integrationen

UI-Frameworks

• 

  @astrojs/alpinejs

• 

  @astrojs/lit

• 

  @astrojs/preact

• 

  @astrojs/react

• 

  @astrojs/solid⁠-⁠js

• 

  @astrojs/svelte

• 

  @astrojs/vue

SSR-Adapter

• 

  @astrojs/cloudflare

• 

  @astrojs/netlify

• 

  @astrojs/node

• 

  @astrojs/vercel

Sonstiges

• 

  @astrojs/db

• 

  @astrojs/markdoc

• 

  @astrojs/mdx

• 

  @astrojs/partytown

• 

  @astrojs/sitemap

• 

  @astrojs/tailwind

Automatische Einrichtung von Integrationen

Abschnitt betitelt Automatische Einrichtung von Integrationen

Astro stellt ein astro add-Kommando zur Verfügung, um die Einrichtung von Integrationen zu automatisieren.

Achtung

Wir werden immer um Bestätigung bitten, bevor wir deine Dateien aktualisieren. Jedoch ist es empfehlenswert, ein Versionskontroll-Backup zu haben.

Führe das astro add-Kommando mit dem Paketmanager deiner Wahl aus, und unser automatischer Integrations-Wizard wird deine Konfigurationsdatei aktualisieren und alle notwendigen Abhängigkeiten installieren.

npm

npx astro add react

pnpm

pnpm astro add react

Yarn

yarn astro add react

Es ist sogar möglich, mehrere Integrationen gleichzeitig zu konfigurieren!

npm

npx astro add react tailwind partytown

pnpm

pnpm astro add react tailwind partytown

Yarn

yarn astro add react tailwind partytown

Behandlung von Abhängigkeiten deiner Integrationen

Solltest du eine Warnung wie Cannot find package '[package-name]' nach dem Hinzufügen einer Integration erhalten, hat dein Paketmanager vermutlich nicht die zugehörigen Peer Dependencies installiert. Um diese fehlenden Abhängigkeiten zu installieren, führe einfach npm install [package-name] aus.

Integrationen nutzen

Abschnitt betitelt Integrationen nutzen

Astro-Integrationen werden immer über die integrations-Option in deiner astro.config.mjs-Datei konfiguriert.

Es gibt drei übliche Wege, um eine Integration in dein Astro-Projekt zu importieren:

1. Eine Integration über ein npm-Paket installieren.
2. Deine eigene Integration über eine lokale Datei innerhalb deines Projekts importieren.
3. Deine eigene Integration direkt in der Konfigurationsdatei schreiben.

astro.config.mjs

import {defineConfig} from 'astro/config';
import installedIntegration from '@astrojs/vue';
import localIntegration from './my-integration.js';

export default defineConfig({
  integrations: [
    // 1. Aus einem installiertem npm-Paket importieren
    installedIntegration(),
    // 2. Aus einer lokalen JS-Datei importieren
    localIntegration(),
    // 3. Ein Inline-Objekt
    {name: 'namespace:id', hooks: { /* ... */ }},
  ]
})

Sieh dir die Integrations-API an, um mehr darüber zu erfahren, wie du deine eigenen Integrationen erstellen kannst.

Benutzerdefinierte Optionen

Abschnitt betitelt Benutzerdefinierte Optionen

Integrationen werden in der Regel als Factory-Funktionen entwickelt, die das Integrations-Objekt zurückliefern. Dadurch kannst du Argumente und Optionen an die Funktion übergeben, um die Integration zu konfigurieren.

integrations: [
  // Beispiel: Argumente an eine Integration übergeben
  sitemap({filter: true})
]

Integrationen aktivieren und deaktivieren

Abschnitt betitelt Integrationen aktivieren und deaktivieren

Integrationen mit falsy-Werten werden ignoriert. Dadurch können sie aktiviert oder deaktiviert werden, und man muss sich keine Gedanken über hinterlassene undefined- und Boolean-Werte machen.

integrations: [
  // Beispiel: Keine Sitemap unter Windows erstellen
  process.platform !== 'win32' && sitemap()
]

Weitere Integrationen entdecken

Abschnitt betitelt Weitere Integrationen entdecken

Eine Vielzahl von Integrationen, die durch die Community entwickelt werden, können in Astros Integrations-Verzeichnis gefunden werden. Folge den dortigen Links, um detaillierte Anleitungen zu ihrer Benutzung und Konfiguration zu erhalten.

Eine eigene Integration erstellen

Abschnitt betitelt Eine eigene Integration erstellen

Astros Integrations-API ist durch Rollup und Vite inspiriert und wurde so gestaltet, dass sie sich für alle vertraut anfühlen sollte, die jemals ein Rollup- oder Vite-Plugin geschrieben haben.

Sieh dir die Integrations-API an, um mehr darüber zu erfahren, was Integrationen leisten können und wie du deine eigenen Integrationen erstellen kannst.