@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).
Installation
Abschnitt betitelt InstallationAstro 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.
npx astro add sveltepnpm astro add svelteyarn astro add svelteSollten dir dabei Probleme begegnen, melde sie gerne bei uns auf GitHub und versuche stattdessen die manuelle Installation.
Manuelle Installation
Abschnitt betitelt Manuelle InstallationInstalliere zuerst das @astrojs/svelte-Paket:
npm install @astrojs/sveltepnpm add @astrojs/svelteyarn add @astrojs/svelteDie 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:
npm install sveltepnpm add svelteyarn add svelteWende dann die Integration auf die Datei astro.config.* an, indem du die Eigenschaft integrations verwendest:
import { defineConfig } from 'astro/config';import svelte from '@astrojs/svelte';
export default defineConfig({ // ... integrations: [svelte()],});Erste Schritte
Abschnitt betitelt Erste SchritteUm 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
Optionen
Abschnitt betitelt OptionenDiese 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.
Standardoptionen
Abschnitt betitelt StandardoptionenDiese 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:
import { defineConfig } from 'astro/config';import svelte from '@astrojs/svelte';
export default defineConfig({ integrations: [svelte({ preprocess: [] })],});export default { preprocess: [],};Intellisense für TypeScript
Abschnitt betitelt Intellisense für TypeScript@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.
import { vitePreprocess } from '@astrojs/svelte';
export default { preprocess: vitePreprocess(),};Diese Konfigurationsdatei wird automatisch hinzugefügt, wenn du astro add svelte ausführst.
