@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.
Sollten 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:
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:
Wende dann die Integration auf die Datei astro.config.*
an, indem du die Eigenschaft integrations
verwendest:
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:
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
:
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.
Diese Konfigurationsdatei wird automatisch hinzugefügt, wenn du astro add svelte
ausführst.