Zum Inhalt springen

@astrojs/ svelte

v5.6.0 GitHub npm Changelog

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 Installation

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.

Manuelle Installation

Abschnitt betitelt 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()],
});

Erste Schritte

Abschnitt betitelt Erste Schritte

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

Optionen

Abschnitt betitelt Optionen

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.

Standardoptionen

Abschnitt betitelt Standardoptionen

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: [],
};

Intellisense für TypeScript

Abschnitt betitelt Intellisense für TypeScript
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