How to use Svelte components in Astro

Astro supports Svelte out of the box. All you need is the correct framework renderer and you are good to go.

A renderer is an npm package that handles two things; rendering and rehydrating HTML.

We need to install @astrojs/renderer-svelte plugin to make Svelte components work.

Install @astrojs/renderer-svelte via npm or yarn:

# Using npm
npm install @astrojs/renderer-svelte

# Using yarn
yarn add @astrojs/renderer-svelte

Add it to your astro.config.mjs in the renderer property.

export default {
  // ...

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

Now you can import your Svelte component as usual.

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

<Navigation />

For more information about renderers, take a look at the documentation.