Svelte

Nano Stores works with .svelte files out of the box because they implement Svelte’s store contract:

<script>
  import { profile } from '../stores/profile.js'
</script>

<header>Hi, {$profile.name}</header>

But for .svelte.ts files or if you prefer new runes API, you can use useStore() reactive wrapper from @nanostores/svelte-runes (use store.current to read value):

<script>
  import { useStore } from '@nanostores/svelte-runes'
  import { profile } from '../stores/profile.js'

  let user = useStore(profile)
</script>

<header>Hi, {user.current.name}</header>

In other frameworks, Nano Stores promote code style to use $ prefixes for store’s names. But in Svelte it has a special meaning, so we recommend to not follow this code style here.

---

Imported from the Nano Stores README for version 1.5.5. Improve this page there.