Getting started

Supported Tauri Version

This plugin requires Tauri 2.0 or later.

Install

Install the Rust crate by adding the following to your Cargo.toml file:

src-tauri/Cargo.toml

[dependencies]
tauri-plugin-svelte = "2"

Install the JavaScript package with your preferred package manager:

npm

npm install @tauri-store/svelte

pnpm

pnpm add @tauri-store/svelte

deno

deno add npm:@tauri-store/svelte

bun

bun add @tauri-store/svelte

yarn

yarn add @tauri-store/svelte

Usage

1. Enable the required permissions in your capabilities file:

src-tauri/capabilities/svelte.json

{
  "identifier": "svelte",
  "windows": ["*"],
  "permissions": ["svelte:default", "core:event:default"]
}

2. Register the plugin with Tauri:

src-tauri/src/lib.rs

tauri::Builder::default()
  .plugin(tauri_plugin_svelte::init())
  .run(tauri::generate_context!())
  .expect("error while running tauri application");

3. Create a store:

src/lib/stores/counter.ts

import { Store } from '@tauri-store/svelte';

export const store = new Store('counter', { counter: 0 });

4. Start it:

await store.start();

TIP

Stores won't be saved nor synchronized until you call the start method.

5. Use the store in your Svelte components:

<script>
  import { store } from '$lib/stores/counter';
</script>

<div>
  <p>Counter: {$store.counter}</p>
  <button type="button" onclick={() => $store.counter++}>
    <span>Increment</span>
  </button>
</div>

Runes

You can also use runes instead of conventional stores.

src/lib/counter.svelte.ts

import { RuneStore } from '@tauri-store/svelte';

const store = new RuneStore('counter', { counter: 0 });

function increment() {
  // "state" is reactive!
  store.state.counter += 1;
}