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

このAstroインテグレーションは、Svelte 5コンポーネントのレンダリングとクライアントサイドハイドレーションを有効にします。Svelte 3および4のサポートについては、代わりに@astrojs/svelte@5をインストールしてください。

インストール

Astroには、公式インテグレーションのセットアップを自動化するためのastro addコマンドが含まれています。もしよろしければ、手動でインテグレーションをインストールできます。

@astrojs/svelteをインストールするには、プロジェクトディレクトリから次のコマンドを実行し、プロンプトに従ってください。

問題が発生した場合は、GitHubで報告してください。そして、以下の手動インストール手順を試してください。

手動インストール

まず、@astrojs/svelteパッケージをインストールします。

ほとんどのパッケージマネージャーは、関連するピア依存関係もインストールします。Astroの起動時にCannot find package 'svelte'（または同様の）警告が表示される場合は、SvelteとTypeScriptをインストールする必要があります。

次に、integrationsプロパティを使用して、インテグレーションをastro.config.*ファイルに適用します。

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

そして、プロジェクトのルートディレクトリにsvelte.config.jsという新しいファイルを作成し、次のコードを追加します。

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

はじめに

Astroで最初のSvelteコンポーネントを使用するには、UIフレームワークのドキュメントにアクセスしてください。以下について探求します。

• 📦 フレームワークコンポーネントがどのように読み込まれるか
• 💧 クライアントサイドハイドレーションのオプション
• 🤝 フレームワークを混在させてネストする機会

オプション

このインテグレーションは@sveltejs/vite-plugin-svelteによって提供されています。Svelteコンパイラをカスタマイズするには、インテグレーションにオプションを指定できます。詳細については、@sveltejs/vite-plugin-svelteのドキュメントを参照してください。

astro.config.mjsのsvelteインテグレーションに渡すか、svelte.config.jsでオプションを設定できます。両方が存在する場合、astro.config.mjsのオプションがsvelte.config.jsのオプションよりも優先されます。

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

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

Preprocessors

SvelteファイルでSCSSまたはStylusを使用している場合は、svelte.config.jsファイルを作成して、Svelteによって前処理され、Svelte IDE拡張機能がSvelteファイルを正しく解析できます。

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

この設定ファイルは、astro add svelteを実行すると自動的に追加されます。vitePreprocessの詳細については、@sveltejs/vite-plugin-svelteのドキュメントを参照してください。