How to use Svelte components in Astro

Nov 17, 2021

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 renderers 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.