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

Install the JavaScript package with your preferred package manager:

npm

npm install @tauri-store/vue

pnpm

pnpm add @tauri-store/vue

deno

deno add npm:@tauri-store/vue

bun

bun add @tauri-store/vue

yarn

yarn add @tauri-store/vue

Usage

1. Enable the required permissions in your capabilities file:

src-tauri/capabilities/vue.json

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

2. Register the plugin with Tauri:

src-tauri/src/lib.rs

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

3. Create a store:

src/lib/stores/counter.ts

import { createStore } from '@tauri-store/vue';

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

TIP

createStore is also exported as store.

4. Start it:

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.

5. Use the store in your Vue components:

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

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