Astro Integrationen

6 Kategorien

Die wichtigsten offiziellen Astro-Integrationen: @astrojs/react · @astrojs/vue · @astrojs/tailwind · @astrojs/mdx · @astrojs/sitemap · @astrojs/partytown Integrationen erweitern Astro um Unterstützung für andere Frameworks, CSS-Tools, Inhaltsformate, SEO-Funktionen und Performance-Optimierungen. Hier finden Sie die wichtigsten offiziellen Integrationen auf einen Blick.

Framework-Integrationen – React, Vue, Svelte, Solid, Preact

@astrojs/react · @astrojs/vue · @astrojs/svelte

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

Framework-Integrationen ermöglichen die Verwendung von Komponenten aus anderen UI-Frameworks in Astro – mit voller interaktiver Unterstützung über die Inseln-Architektur.

Offizielle Framework-Integrationen

Integration	Framework	Installation
@astrojs/react	React	npm install @astrojs/react
@astrojs/vue	Vue	npm install @astrojs/vue
@astrojs/svelte	Svelte	npm install @astrojs/svelte
@astrojs/solid-js	Solid	npm install @astrojs/solid-js
@astrojs/preact	Preact	npm install @astrojs/preact
@astrojs/lit	Lit	npm install @astrojs/lit

Beispiele

---

import Counter from '../components/Counter.jsx';

---

---

import TodoList from '../components/TodoList.vue';

---

---

import Chart from '../components/Chart.svelte';

---

Tipp: Framework-Komponenten werden standardmäßig serverseitig gerendert und nur bei Bedarf mit JavaScript hydriert. Die client:*-Direktiven steuern, wann die Komponente interaktiv wird.

CSS-Integrationen – Tailwind, UnoCSS, Sass, PostCSS

@astrojs/tailwind · @astrojs/unocss

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

CSS-Integrationen erweitern Astro um leistungsstarke CSS-Frameworks und Preprozessoren für ein effizientes Styling.

CSS-Integrationen

Integration	Beschreibung	Installation
@astrojs/tailwind	Tailwind CSS (Utility-First)	npm install @astrojs/tailwind
@astrojs/unocss	UnoCSS (Atomic CSS Engine)	npm install @astrojs/unocss

Beispiele

---

const name = "Astro";

---

<div>

<h1 class="text-2xl font-bold text-gray-800">Hallo { name }</h1>

<p class="text-gray-600">Willkommen bei Astro mit Tailwind!</p>

</div>

// tailwind.config.mjs (optional)

export default {

content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],

theme: { /* Erweiterungen */ },

plugins: [],

};

Tipp: Die Tailwind-Integration arbeitet nahtlos mit Astros Scoped-Stiles zusammen. Sie können Tailwind-Klassen direkt in Astro-Komponenten verwenden.

Inhalts-Integrationen – MDX, Markdown, JSON

@astrojs/mdx · @astrojs/markdown-remark

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

Inhalts-Integrationen erweitern Astro um Unterstützung für erweiterte Inhaltsformate wie MDX, die JSX-Komponenten in Markdown ermöglichen.

Inhalts-Integrationen

Integration	Beschreibung	Installation
@astrojs/mdx	MDX-Unterstützung (Markdown + JSX)	npm install @astrojs/mdx

Beispiele

---

title: 'Hello World'

pubDate: 2024-01-15

tags: ['astro', 'mdx']

---

# Hallo Welt

Das ist ein MDX-Blogpost.

---

import Counter from '../components/Counter.astro';

---

// astro.config.mjs mit MDX-Konfiguration

import { defineConfig } from 'astro/config';

import mdx from '@astrojs/mdx';

export default defineConfig({

integrations: [mdx({

remarkPlugins: [], // Remark-Plugins

rehypePlugins: [], // Rehype-Plugins

})],

});

Tipp: MDX ist ideal für technische Dokumentationen, Blogs und Inhalte, die interaktive Komponenten benötigen. Die Integration unterstützt vollständige Content Collections.

SEO & Performance – Sitemap, Partytown, Compress

@astrojs/sitemap · @astrojs/partytown · @astrojs/compress

// astro.config.mjs import { defineConfig } from 'astro/config'; import sitemap from '@astrojs/sitemap'; import partytown from '@astrojs/partytown'; export default defineConfig({ site: 'https://example.com', integrations: [sitemap(), partytown()], });

SEO & Performance-Integrationen optimieren Ihre Astro-Website für Suchmaschinen und verbessern die Ladezeit durch moderne Techniken.

SEO & Performance-Integrationen

Integration	Beschreibung	Installation
@astrojs/sitemap	Automatische Sitemap-Generierung (XML)	npm install @astrojs/sitemap
@astrojs/partytown	Partytown für Drittanbieter-Skripte (Performance)	npm install @astrojs/partytown
@astrojs/compress	HTML-Komprimierung (Optimierung)	npm install @astrojs/compress

Beispiele

// astro.config.mjs mit Sitemap

import { defineConfig } from 'astro/config';

import sitemap from '@astrojs/sitemap';

export default defineConfig({

site: 'https://example.com', // Wichtig für Sitemap!

integrations: [sitemap({

filter: (page) => !page.includes('/admin'), // Seiten ausschließen

changefreq: 'weekly',

priority: 0.7,

})],

});

// Partytown für Google Analytics

import partytown from '@astrojs/partytown';

export default defineConfig({

integrations: [partytown({

config: {

forward: ['dataLayer.push'],

})],

});

Tipp: Die Sitemap-Integration generiert automatisch eine sitemap-index.xml für alle statischen und dynamischen Seiten. Partytown verschiebt Drittanbieter-Skripte in einen Web Worker für bessere Performance.

Performance-Optimierung – Bilder, Fonts, Netzwerk

@astrojs/image · astro:assets

// astro:assets (eingebaut) import { Image } from 'astro:assets'; import myImage from '../assets/photo.jpg'; <Image src={ myImage } alt="Beschreibung" />

Performance-Optimierungen in Astro umfassen integrierte Bildoptimierung mit astro:assets sowie externe Integrationen für Fonts und Netzwerk-Optimierung.

Performance-Tools

Tool / Integration	Beschreibung
astro:assets	Integrierte Bildoptimierung (seit Astro 3.0)
@astrojs/image	Erweiterte Bildoptimierung (veraltet)
@fontsource/*	Self-hosted Google Fonts
vite-plugin-pwa	PWA-Unterstützung über Vite

Beispiele

---

import { Image } from 'astro:assets';

import heroImage from '../assets/hero.jpg';

import profileImage from '../assets/profile.png';

---

<Image

src={ heroImage }

alt="Hero Bild"

width={ 800 }

height={ 400 }

loading="eager"

<Image

src={ profileImage }

alt="Profilbild"

width={ 200 }

height={ 200 }

format="webp"

Tipp: astro:assets ist seit Astro 3.0 die empfohlene Lösung für Bildoptimierung. Sie bietet automatische Konvertierung zu WebP, Lazy Loading und Responsive-Bilder ohne zusätzliche Konfiguration.

Weitere Integrationen – Netlify, Vercel, Cloudflare, Deno

@astrojs/netlify · @astrojs/vercel · @astrojs/cloudflare

// astro.config.mjs import { defineConfig } from 'astro/config'; import netlify from '@astrojs/netlify'; export default defineConfig({ output: 'server', adapter: netlify(), });

Adapter-Integrationen ermöglichen das Deployment von Astro auf verschiedenen Hosting-Plattformen mit serverseitigem Rendering (SSR) und Edge-Funktionen.

Adapter-Integrationen

Integration	Plattform	Installation
@astrojs/netlify	Netlify (Serverless, Edge)	npm install @astrojs/netlify
@astrojs/vercel	Vercel (Serverless, Edge)	npm install @astrojs/vercel
@astrojs/cloudflare	Cloudflare Pages / Workers	npm install @astrojs/cloudflare
@astrojs/deno	Deno (Self-Hosted)	npm install @astrojs/deno
@astrojs/node	Node.js (Self-Hosted)	npm install @astrojs/node

Beispiele

// astro.config.mjs für Netlify (Serverless)

import { defineConfig } from 'astro/config';

import netlify from '@astrojs/netlify';

export default defineConfig({

output: 'server',

adapter: netlify({

edgeMiddleware: true, // Edge-Middleware aktivieren

}),

});

// astro.config.mjs für Vercel (Edge)

import { defineConfig } from 'astro/config';

import vercel from '@astrojs/vercel';

export default defineConfig({

output: 'server',

adapter: vercel({

edgeMiddleware: true,

includeFiles: ['./src/data/**'],

}),

});

// Netlify _redirects für Weiterleitungen

/* /alt /neu 301 */

Tipp: Für statische Websites benötigen Sie keinen Adapter. Adapter sind nur für SSR erforderlich. Die meisten Plattformen bieten auch eine einfache Integration über die Plattform-eigenen Build-Konfigurationen.

Astro Integrationen im Überblick

Frameworks React, Vue, Svelte, Solid
@astrojs/react, @astrojs/vue

CSS Tailwind, UnoCSS
@astrojs/tailwind

Content MDX, Markdown
@astrojs/mdx

SEO Sitemap
@astrojs/sitemap

Performance Partytown, Bildoptimierung
@astrojs/partytown, astro:assets

Adapter Netlify, Vercel, Cloudflare
@astrojs/netlify

Quick Summary

@astrojs/react

React

@astrojs/tailwind

Tailwind CSS

@astrojs/mdx

MDX

@astrojs/sitemap

Sitemap

astro:assets

Bildoptimierung

@astrojs/netlify

Adapter

npm install @astrojs/react @astrojs/tailwind @astrojs/mdx @astrojs/sitemap