Skip to content

Latest commit

 

History

History
158 lines (121 loc) · 5.06 KB

svelte.mdx

File metadata and controls

158 lines (121 loc) · 5.06 KB
Raw
type title description githubIntegrationURL category i18nReady
integration
@astrojs/svelte
Lerne wie du die @astrojs/svelte Framework-Integration in deinem Astro-Projekt verwendest, um den Component-Support auszubauen.
renderer
true

import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro'; import Since from '/components/Since.astro';

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

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.

```sh npx astro add svelte ``` ```sh pnpm astro add svelte ``` ```sh yarn astro add svelte ```

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

Manuelle Installation

Installiere zuerst das @astrojs/svelte-Paket:

```sh npm install @astrojs/svelte ``` ```sh pnpm add @astrojs/svelte ``` ```sh yarn add @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:

```sh npm install svelte ``` ```sh pnpm add svelte ``` ```sh yarn add svelte ```

Wende 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

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

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

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:

import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  integrations: [svelte({ preprocess: [] })],
});
export default {
  preprocess: [],
};

Intellisense für TypeScript

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.