Astro で Svelte コンポーネントを使用する方法

Astro はすぐに Svelte をサポートします.必要なのは正しいフレームワーク renderer だけで、準備完了です.

レンダラーは、2 つのことを処理する npm パッケージです. HTML のレンダリングとリハイドレート.

Svelte コンポーネントを機能させるには、@astrojs/renderer-svelte プラグインをインストールする必要があります.

npm または yarn を介して @astrojs/renderer-svelte をインストールします.

# Using npm
npm install @astrojs/renderer-svelte

# Using yarn
yarn add @astrojs/renderer-svelte

astro.config.mjs プロパティの renderer に追加します.

export default {
  // ...

  renderers: [
    // ...
    '@astrojs/renderer-svelte'
  ]
}

これで、通常どおり Svelte コンポーネントをインポートできます.

---
import Navigation from '../components/Navigation.svelte'
---

<Navigation />

レンダラーの詳細については、 documentation をご覧ください.