Aller au contenu

@astrojs/ svelte

Cette intégration Astro permet le rendu côté serveur et l’hydratation côté client pour vos composants Svelte. Elle supporte Svelte 3, 4 et 5 (expérimental).

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 :

Fenêtre de terminal
npx 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.

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

Fenêtre de terminal
npm install @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 :

Fenêtre de terminal
npm install svelte

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

astro.config.mjs
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';
export default defineConfig({
// ...
integrations: [svelte()],
});

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

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 @sveltejs/vite-plugin-svelte docs pour plus de détails.

Cette intégration transmet les options par défaut suivantes au compilateur Svelte :

const defaultOptions = {
emitCss: true,
compilerOptions: { dev: isDev, hydratable: true },
preprocess: vitePreprocess(),
};

Ces valeurs emitCss, compilerOptions.dev, et compilerOptions.hydratable sont nécessaires pour construire correctement pour Astro et ne peuvent pas être surchargées.

Fournir vos propres options de preprocess aura pour effet de surcharger la valeur par défaut de vitePreprocess(). Assurez-vous d’activer les flags de préprocesseur nécessaires à votre projet.

Vous pouvez définir les options en les passant à l’intégration svelte dans astro.config.mjs ou dans svelte.config.js. L’une ou l’autre de ces deux options remplacera le réglage par défaut de 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: [],
};
Ajouté à la version : @astrojs/svelte@2.0.0

Si vous utilisez un préprocesseur comme TypeScript ou SCSS dans vos fichiers Svelte, vous pouvez créer un fichier svelte.config.js pour que l’extension Svelte IDE puisse analyser correctement les fichiers Svelte.

svelte.config.js
import { vitePreprocess } from '@astrojs/svelte';
export default {
preprocess: vitePreprocess(),
};

Ce fichier de configuration sera automatiquement ajouté pour vous lorsque vous lancerez astro add svelte.

Plus d'intégrations

Framework d'interface utilisateur

Adaptateurs SSR

Autres intégrations

Contribuer

Comment pouvons-nous vous aider ?

Créer une issue GitHub

Le moyen le plus rapide d'alerter notre équipe d'un problème.

Communauté