DEV Community

Cover image for How to use Svelte components in Astro
Oz Ertas
Oz Ertas

Posted on • Updated on • Originally published at ertas.dev

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
Enter fullscreen mode Exit fullscreen mode

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

export default {
  // ...

  renderers: [
    // ...
    '@astrojs/renderer-svelte'
  ]
}
Enter fullscreen mode Exit fullscreen mode

Now you can import your Svelte component as usual.

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

<Navigation />
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)