astro/examples/framework-svelte/README.md
Nate Moore 3a56d77415 Renderer: add Solid renderer (#667)
* feat: add support for `jsxImportSource`, new JSX transform

* WIP: solid renderer

* [Renderer] Solid (#656)

* feat: add support for `jsxImportSource`, new JSX transform

* WIP: solid renderer

* Solid renderer: fix SSR of children, hydration (top level)

Caveat: cannot hydrate children/descendants of hydrated parents

* Fix hydration of fragments

* fix: SyntaxError in React/Preact renderers

* fix: errors in React/Preact renderers

* feat: update react external

* chore: update examples

* chore: delete old changelog

* chore: update astro config

Co-authored-by: Nate Moore <nate@skypack.dev>

* Changing the preact to Solid (#669)

* chore: use new client:visible syntax

* fix: dev script issue

* chore: cleanup SolidJS example

* docs: update framework example docs

* chore: cleanup framework-multiple example

* fix: remove SolidJS false-positives from Preact renderer

* chore: add changeset

Co-authored-by: eyelidlessness <eyelidlessness@users.noreply.github.com>
Co-authored-by: Abdullah Mzaien <s201540830@kfupm.edu.sa>
2021-07-20 15:56:47 -05:00

704 B

Using Svelte with Astro

This example showcases Astro's built-in support for Svelte.

Installation

Automatic

Bootstrap your Astro project with this template!

npm init astro --template framework-svelte

Manual

To use Svelte components in your Astro project:

  1. Install @astrojs/renderer-svelte

    npm i @astrojs/renderer-svelte
    
  2. Add "@astrojs/renderer-svelte" to your renderers in astro.config.mjs.

    export default {
      renderers: [
        "@astrojs/renderer-svelte",
        // optionally, others...
      ]
    }
    

Usage

Write your Svelte components as .svelte files in your project.