Using Svelte Components with Astro

We prefer using Astro to build sites, so all Svelte our components to are built to be compatible with both Svelte and Astro.

Most of the time, you would be able to import and use components in Astro just like in Svelte.

---
import { ComponentName } from '@splendidLabz/svelte'
---

<ComponentName />

If the component requires frontend JavaScript, you will need to use client directives Astro removed all JavaScript from components without client directives.

We will only use the load directive in this documentation to keep things simple and consistent. In practice, you can use any directive you want.

<ComponentName client:load />

Installing Svelte in an Astro project

Naturally, you will need to install Svelte in your Astro project if you wish to take advantage of this library. Please follow the instructions from Astro’s official Svelte integration to do so.

That’s all you need to know about using this library directly in an Astro file.