@astrojs/ svelte

v7.1.0 GitHub npm Journal des modifications

Cette intégration Astro permet le rendu et l’hydratation côté client pour vos composants Svelte 5. Pour la prise en charge de Svelte 3 et 4, installez @astrojs/svelte@5 à la place.

Installation

Astro inclut une commande astro add pour automatiser l’installation des intégrations officielles. Si vous préférez, vous pouvez installer les intégrations manuellement à la place.

Pour installer @astrojs/svelte, exécutez ce qui suit depuis le répertoire de votre projet et suivez les instructions :

npx astro add svelte

pnpm astro add svelte

yarn astro add svelte

Si vous rencontrez des problèmes, n’hésitez pas à nous les signaler sur GitHub et essayez les étapes d’installation manuelle ci-dessous.

Installation manuelle

Tout d’abord, installez le paquet @astrojs/svelte :

npm install @astrojs/svelte

pnpm add @astrojs/svelte

yarn add @astrojs/svelte

La plupart des gestionnaires de paquets installent également les dépendances associées. Si vous voyez un avertissement Cannot find package 'svelte' (ou similaire) lorsque vous démarrez Astro, vous devez installer Svelte et Typescript :

npm install svelte typescript

pnpm add svelte typescript

yarn add svelte typescript

Ensuite, appliquez l’intégration à votre fichier astro.config.* en utilisant la propriété integrations :

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

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

Et créez un nouveau fichier appelé svelte.config.js dans le répertoire racine de votre projet et ajoutez le code suivant :

import { vitePreprocess } from '@astrojs/svelte';

export default {
  preprocess: vitePreprocess(),
}

Démarrage

Pour utiliser votre premier composant Svelte dans Astro, consultez notre documentation sur les frameworks UI. Vous y découvrirez :

📦 comment les composants du framework sont chargés,
💧 les options d’hydratation côté client, et
🤝 les possibilités de mélanger et d’imbriquer les frameworks entre eux

Options

Cette intégration est alimentée par @sveltejs/vite-plugin-svelte. Pour personnaliser le compilateur Svelte, des options peuvent être fournies à l’intégration. Voir la documentation de @sveltejs/vite-plugin-svelte pour plus de détails.

Vous pouvez définir des options soit en les passant à l’intégration svelte dans astro.config.mjs, soit dans svelte.config.js. Les options dans astro.config.mjs auront la priorité sur les options dans svelte.config.js si les deux sont présentes :

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

export default defineConfig({
  integrations: [svelte({ extensions: ['.svelte'] })],
});

export default {
  extensions: ['.svelte'],
};

Préprocesseurs

Ajouté à la version : @astrojs/svelte@2.0.0

Si vous utilisez SCSS ou Stylus dans vos fichiers Svelte, vous pouvez créer un fichier svelte.config.js afin qu’ils soient préalablement traités par Svelte, et que l’extension Svelte pour les IDE puisse analyser correctement les fichiers Svelte.

import { vitePreprocess } from '@astrojs/svelte';

export default {
  preprocess: vitePreprocess(),
};

Ce fichier de configuration sera automatiquement ajouté lorsque vous lancerez astro add svelte. Voir la documentation de @sveltejs/vite-plugin-svelte pour plus de détails sur vitePreprocess.