2021-06-28 15:46:10 +00:00
|
|
|
# Using Svelte with Astro
|
|
|
|
|
2021-07-21 23:10:03 +00:00
|
|
|
This example showcases Astro's built-in support for [Svelte](https://svelte.dev/).
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
|
|
|
|
### Automatic
|
|
|
|
|
|
|
|
Bootstrap your Astro project with this template!
|
|
|
|
|
|
|
|
```shell
|
2021-07-21 01:06:11 +00:00
|
|
|
npm init astro -- --template framework-svelte
|
2021-07-01 12:43:25 +00:00
|
|
|
```
|
|
|
|
|
2021-07-21 23:10:03 +00:00
|
|
|
### Manual
|
|
|
|
|
|
|
|
To use Svelte components in your Astro project:
|
|
|
|
|
|
|
|
1. Install `@astrojs/renderer-svelte`
|
|
|
|
|
|
|
|
```shell
|
|
|
|
npm i @astrojs/renderer-svelte
|
|
|
|
```
|
|
|
|
|
|
|
|
2. Add `"@astrojs/renderer-svelte"` to your `renderers` in `astro.config.mjs`.
|
|
|
|
|
|
|
|
```js
|
|
|
|
export default {
|
|
|
|
renderers: [
|
|
|
|
"@astrojs/renderer-svelte",
|
|
|
|
// optionally, others...
|
|
|
|
]
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
## Usage
|
2021-06-28 15:46:10 +00:00
|
|
|
|
2021-07-21 23:10:03 +00:00
|
|
|
Write your Svelte components as `.svelte` files in your project.
|