Skip to content

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:

toml
[dependencies]
tauri-plugin-pinia = "3"

Install the JavaScript package with your preferred package manager:

shell
npm install @tauri-store/pinia
shell
pnpm add @tauri-store/pinia
shell
deno add npm:@tauri-store/pinia
shell
bun add @tauri-store/pinia
shell
yarn add @tauri-store/pinia

Usage

  1. Enable the required permissions in your capabilities file:
json
{
  "identifier": "pinia",
  "windows": ["*"],
  "permissions": ["pinia:default", "core:event:default"]
}
  1. Register the plugin with Tauri:
rust
tauri::Builder::default()
  .plugin(tauri_plugin_pinia::init())
  .run(tauri::generate_context!())
  .expect("error while running tauri application");
  1. Enable the plugin for Pinia:
typescript
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { createPlugin } from '@tauri-store/pinia';

const app = createApp(App);

const pinia = createPinia();
pinia.use(createPlugin());

app.use(pinia);
app.mount('#app');

TIP

createPlugin is also exported as TauriPluginPinia.

  1. Define your Pinia store:
typescript
import { ref } from 'vue';
import { defineStore } from 'pinia';

export const useStore = defineStore('counter', () => {
  const counter = ref(0);
  return { counter };
});
  1. Start it:
typescript
const store = useStore();
await store.$tauri.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.

Nuxt

If you are using Nuxt, you can create a Nuxt plugin to enable it for Pinia:

typescript
import type { Pinia } from 'pinia';
import { TauriPluginPinia } from '@tauri-store/pinia';

// See: https://pinia.vuejs.org/core-concepts/plugins.html#Nuxt-js
export default defineNuxtPlugin(({ $pinia }) => {
  ($pinia as Pinia).use(TauriPluginPinia());
});