Zum Inhalt springen

@astrojs/ svelte

Diese Astro-Integration erlaubt dir serverseitiges Rendering und clientseitige Hydratation von deinen Svelte-Komponenten. Sie unterstützt Svelte 3, 4 und 5 (experimentell).

Astro verfügt über einen astro add-Befehl, der das Setup offizieller Integrationen automatisiert. Wenn du möchtest, kannst du die Integrationen auch manuell installieren.

Um @astrojs/svelte zu installieren, führe einen der folgenden Befehle in einem neuen Terminal-Fenster aus.

Terminal-Fenster
npx astro add svelte

Sollten dir dabei Probleme begegnen, melde sie gerne bei uns auf GitHub und versuche stattdessen die manuelle Installation.

Installiere zuerst das @astrojs/svelte-Paket:

Terminal-Fenster
npm install @astrojs/svelte

Die meisten Paketmanager installieren auch die zugehörigen Peer-Abhängigkeiten. Wenn du jedoch beim Starten von Astro die Warnung “Cannot find package ‘svelte’” (oder eine ähnliche Meldung) erhältst, musst du Svelte manuell installieren:

Terminal-Fenster
npm install svelte

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 svelte from '@astrojs/svelte';
export default defineConfig({
// ...
integrations: [svelte()],
});

Um deine ersten Svelte-Komponenten in Astro zu verwenden, gehe zu unserer UI-Framework Dokumentation. Dort lernst du:

  • 📦 wie Framework-Komponenten geladen werden,
  • 💧 clientseitige Hydratationsoptionen, und
  • 🤝 verschiedene Möglichkeiten, unterschiedliche Frameworks zu mischen

Diese Integration wird durch @sveltejs/vite-plugin-svelte ermöglicht. Um den Svelte-Compiler anzupassen, können Optionen für die Integration genutzt werden. Weitere Informationen findest du in der @sveltejs/vite-plugin-svelte-Dokumentation.

Diese Integration nutzt die folgenden Standardoptionen für den Svelte-Compiler:

const defaultOptions = {
emitCss: true,
compilerOptions: { dev: isDev, hydratable: true },
preprocess: vitePreprocess(),
};

Die Einstellungen für emitCss, compilerOptions.dev und compilerOptions.hydratable sind notwendig, um Astro korrekt zu erzeugen, und dürfen nicht überschrieben werden.

Wenn du eine eigene preprocess-Option verwendest, wird diese den Standard von vitePreprocess() überschreiben. Stelle sicher, dass du die notwendigen Preprocessor-Flags für dein Projekt aktivierst.

Du kannst die Einstellungen der svelte-Integration entweder in der astro.config.mjs-Datei oder in der svelte.config.js-Datei ändern. Beides überschreibt die Standardeinstellung von preprocess:

astro.config.mjs
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';
export default defineConfig({
integrations: [svelte({ preprocess: [] })],
});
svelte.config.js
export default {
preprocess: [],
};
Hinzugefügt in: @astrojs/svelte@2.0.0

Wenn du einen Preprocessor wie TypeScript oder SCSS für deine Svelte-Dateien benötigst, kannst du eine svelte.config.js-Datei erstellen, damit die Svelte-IDE-Erweiterung die Svelte-Dateien korrekt analysieren kann.

svelte.config.js
import { vitePreprocess } from '@astrojs/svelte';
export default {
preprocess: vitePreprocess(),
};

Diese Konfigurationsdatei wird automatisch hinzugefügt, wenn du astro add svelte ausführst.

Weitere Integrationen

UI-Frameworks

SSR-Adapter

Sonstiges