tauri-skills

Tauri v2 desktop application development skill

Skill Overview

Tauri is a lightweight desktop application framework built with Rust, using web frontend technologies (HTML, CSS, JavaScript/TypeScript) as the UI layer, combined with a Rust backend to implement high-performance native applications.

Core Features

• Lightweight: Small binary size (~10MB)
• High Performance: Rust backend, native performance
• Secure: Permission-based sandbox security model
• Cross-platform: Supports Windows, macOS, Linux
• Unified on both ends: Seamless communication between frontend and Rust backend

Quick Start

Installation

# 安装 Tauri CLI
npm install -D @tauri-apps/cli@latest

# 创建新项目
npm create tauri-app@latest my-app
cd my-app
npm install

# 启动开发服务器
npm run tauri dev

# 构建生产版本
npm run tauri build

Project Structure

my-app/
├── src/                  # 前端源码
│   ├── main.ts
│   └── App.vue
├── src-tauri/           # Rust 后端源码
│   ├── src/
│   │   └── main.rs
│   ├── Cargo.toml
│   └── tauri.conf.json
├── package.json
└── vite.config.ts

Documentation Index

Getting Started Guide

Document	Description
Quick Start	Installation and project creation
Rust Backend	Command definition and invocation
Permission System	Capability configuration

Common Feature Examples

Feature	Description
File Dialog	Open/save files
System Notification	Send notifications
HTTP Request	Network requests
Clipboard	Read/write clipboard
Shell Command	Open external links

Complete API Reference

Category	Count	Location
JavaScript Namespace	12	reference/javascript-api/
JavaScript Plugin Module	26	reference/javascript-modules/
Permission System Documentation	4	reference/acl/

Configuration Reference

Document	Description
config	tauri.conf.json configuration
cli	CLI commands
environment-variables	Environment variables
webview-versions	WebView version

---

Permission System

Tauri 2.0 adopts a permission-based security model.

Capability

Capability defines the capability boundaries of the application:

{
  "identifier": "main-capability",
  "description": "Main window capability",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "dialog:default",
    "fs:default"
  ]
}

Detailed documentation:capability

Permission Categories

• core: Core permissions
• dialog: Dialog permissions
• fs: File system permissions
• shell: Shell permissions
• http: HTTP request permissions
• notification: Notification permissions

Detailed documentation:permission

---

Configuration

tauri.conf.json

{
  "productName": "My App",
  "identifier": "com.myapp.app",
  "version": "1.0.0",
  "build": {
    "beforeDevCommand": "npm run dev",
    "devUrl": "http://localhost:5173",
    "beforeBuildCommand": "npm run build",
    "frontendDist": "../dist"
  },
  "app": {
    "withGlobalTauri": true,
    "windows": [
      {
        "title": "My App",
        "width": 800,
        "height": 600,
        "resizable": true,
        "fullscreen": false
      }
    ],
    "security": {
      "csp": null
    }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png"
    ]
  }
}

Detailed configuration instructions:config

---

Rust Backend

Command Definition

use tauri::command;

#[derive(Serialize)]
struct User {
    id: u32,
    name: String,
}

#[command]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

#[command]
fn get_user(id: u32) -> Result<User, String> {
    Ok(User { id, name: "John".to_string() })
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet, get_user])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Frontend Invocation

import { invoke } from '@tauri-apps/api/core';

const greeting = await invoke('greet', { name: 'World' });
console.log(greeting); // "Hello, World!"

const user = await invoke<{ id: number; name: string }>('get_user', { id: 1 });
console.log(user.name); // "John"

---

Best Practices

1. Permission Configuration

{
  "identifier": "my-capability",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "dialog:allow-open",
    "dialog:allow-save",
    "fs:allow-read-text-file",
    "fs:allow-write-text-file",
    "notification:default"
  ]
}

2. Error Handling

import { invoke } from '@tauri-apps/api/core';

try {
  const result = await invoke('my_command');
} catch (error) {
  console.error('Error:', error);
}

3. Event Communication

import { listen, emit } from '@tauri-apps/api/event';

await listen('my-event', (event) => {
  console.log('Received:', event.payload);
});

await emit('my-event', { data: 'hello' });

4. Window Management

import { getCurrentWindow } from '@tauri-apps/api/window';

const win = getCurrentWindow();

await win.setTitle('New Title');
await win.minimize();
await win.setFullscreen(true);

---

Frequently Asked Questions

Q1: How to debug a Tauri application?

Use developer tools:

npm run tauri dev -- --inspect-brk

Q2: How to handle cross-origin issues?

In tauri.conf.json , configure CSP or use Tauri's HTTP plugin.

Q3: How to implement automatic updates?

Use the @tauri-apps/plugin-updater plugin, detailed documentation:updater

Q4: How to package and release?

npm run tauri build

The generated files are in the src-tauri/target/release/bundle/ directory.

---

Reference Resources

• Official Documentation:https://v2.tauri.app
• GitHub：https://github.com/tauri-apps/tauri
• API Reference:https://v2.tauri.app/reference/javascript/api/