svelte

@nano_kit/svelte

The @nano_kit/svelte package integrates @nano_kit/store signals and dependency injection with Svelte.

Installation

pnpm add @nano_kit/store @nano_kit/svelte svelte
# or
npm install @nano_kit/store @nano_kit/svelte svelte
# or
yarn add @nano_kit/store @nano_kit/svelte svelte

Quick Start

Import @nano_kit/svelte once to make Nano Kit signals compatible with Svelte stores:

<script lang="ts">
  import '@nano_kit/svelte'
  import { signal } from '@nano_kit/store'

  const count = signal(0)
</script>

<button onclick={() => count(c => c + 1)}>
  Count: {$count}
</button>

Writable signals also get a Svelte-compatible set method:

<script lang="ts">
  import '@nano_kit/svelte'
  import { signal } from '@nano_kit/store'

  const count = signal(0)
</script>

<button onclick={() => count.set($count + 1)}>
  Count: {$count}
</button>

Documentation

For comprehensive guides, API reference, and integration patterns, visit the documentation website.