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 start them, but you can enable the autoStart option to make them start automatically.

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;
}