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-valtio = "2"

Install the JavaScript package with your preferred package manager:

npm

npm install @tauri-store/valtio

pnpm

pnpm add @tauri-store/valtio

deno

deno add npm:@tauri-store/valtio

bun

bun add @tauri-store/valtio

yarn

yarn add @tauri-store/valtio

Usage

1. Enable the required permissions in your capabilities file:

src-tauri/capabilities/valtio.json

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

2. Register the plugin with Tauri:

src-tauri/src/lib.rs

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

3. Create a store:

src/stores/counter.ts

import { store } from '@tauri-store/valtio';

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

export const increment = () => {
  counterStore.state.counter++;
};

4. Start it:

await counterStore.start();

TIP

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

5. Use the store in your React components:

import { useSnapshot } from 'valtio';
import { counterStore, increment } from '@/stores/counter';

export default function MyComponent() {
  // `state` is the actual valtio proxy.
  const snap = useSnapshot(counterStore.state);

  return (
    <div>
      <p>Counter: {snap.counter}</p>
      <button type="button" onClick={increment}>
        <span>Increment</span>
      </button>
    </div>
  );
}