AstroHow-ToBeginner · 4 min read

How to Use Svelte with Astro: Simple Integration Guide

To use Svelte with Astro, install the @astrojs/svelte integration and add it to your astro.config.mjs. Then, import and use Svelte components inside your Astro pages or components with the <MySvelteComponent /> syntax.

📐

Syntax

First, install the Svelte integration for Astro. Then, add it to your astro.config.mjs. Import your Svelte component in an Astro file and use it as a custom tag.

Install integration: Adds Svelte support to Astro.
Configure Astro: Enables Svelte in your project.
Import component: Bring your Svelte component into Astro.
Use component: Render it with a tag like <MySvelteComponent />.

bash and javascript and svelte and astro

npm install @astrojs/svelte

// astro.config.mjs
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  integrations: [svelte()],
});

// src/components/MySvelteComponent.svelte
<script>
  let name = 'Astro User';
</script>
<h2>Hello {name} from Svelte!</h2>

// src/pages/index.astro
---
import MySvelteComponent from '../components/MySvelteComponent.svelte';
---
<html lang="en">
  <head><title>Astro + Svelte</title></head>
  <body>
    <MySvelteComponent />
  </body>
</html>

💻

Example

This example shows a simple Astro page using a Svelte component that greets the user. The Svelte component has a variable and renders it inside an <h2> tag. Astro imports and renders this component seamlessly.

astro and svelte

---
import Greeting from '../components/Greeting.svelte';
---
<html lang="en">
  <head>
    <title>Astro with Svelte Example</title>
  </head>
  <body>
    <h1>Welcome to Astro</h1>
    <Greeting />
  </body>
</html>

// src/components/Greeting.svelte
<script>
  export let name = 'Friend';
</script>
<h2>Hello, {name}!</h2>

Output

<h1>Welcome to Astro</h1> <h2>Hello, Friend!</h2>

⚠️

Common Pitfalls

Common mistakes include forgetting to install or configure the @astrojs/svelte integration, which causes Svelte components not to render. Another is importing Svelte components incorrectly or using them without the proper file extension .svelte. Also, ensure you restart the Astro dev server after adding the integration.

javascript

// Wrong: Missing integration in astro.config.mjs
// Svelte components won't render

// Right: Add integration
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  integrations: [svelte()],
});

📊

Quick Reference

Step	Command / Code	Description
1	npm install @astrojs/svelte	Install Svelte integration
2	Add svelte() to astro.config.mjs integrations	Enable Svelte support
3	Import component from '.svelte' file	Bring Svelte component into Astro
4	Use component as in Astro	Render Svelte component in Astro page

✅

Key Takeaways

Install and add @astrojs/svelte integration in astro.config.mjs to enable Svelte.

Import Svelte components with .svelte extension and use them as tags in Astro files.

Restart Astro dev server after adding integrations to apply changes.

Ensure correct file paths and extensions to avoid import errors.

Svelte components work seamlessly inside Astro pages once configured.