Tauri Best Practices

Overview

💡 Use the tauri-create skill to create new projects.

Core Principles

1. Prioritize JS Plugins, Avoid Writing Rust Code

• Reduce compilation time
• Lower Rust learning curve
• Tauri 2.x plugin ecosystem is mature

shell

pnpm tauri add shell

fs

pnpm tauri add fs

dialog

pnpm tauri add dialog

notification

pnpm tauri add notification

clipboard

pnpm tauri add clipboard-manager

http

pnpm tauri add http

store

pnpm tauri add store

window-state

pnpm tauri add window-state

📌 Complete Plugin List: https://v2.tauri.app/zh-cn/plugin/

1. Plugin Installation Limit:

   pnpm tauri add

   can only add one plugin at a time

pnpm tauri add clipboard-manager
pnpm tauri add window-state

1. Plugin Import Methods: Full import and destructuring import

// Import all methods
import * as Clipboard from '@tauri-apps/plugin-clipboard-manager'
// Then use
await Clipboard.writeText(text)

// Destructuring import
import { writeText, readText } from '@tauri-apps/plugin-clipboard-manager'

2. Frontend API Layer Encapsulation, Support Browser Development

src/
├── api/
│   └── clipboard.ts           # Encapsulated clipboard API
├── lib/
│   └── platform.ts            # Environment detection
└── main.ts

// src/lib/platform.ts
export const isTauri = () => '__TAURI__' in window

// src/api/clipboard.ts
import * as Clipboard from '@tauri-apps/plugin-clipboard-manager'
import { isTauri } from '@/lib/platform'

export async function writeText(text: string): Promise<void> {
  if (isTauri()) {
    await Clipboard.writeText(text)
  } else {
    await navigator.clipboard.writeText(text)
  }
}

export async function readText(): Promise<string> {
  if (isTauri()) {
    return await Clipboard.readText()
  } else {
    return await navigator.clipboard.readText()
  }
}

// Usage
import { writeText, readText } from '@/api/clipboard'
await writeText('Hello')

// Method 1: Return default/mock data
export async function getAppVersion(): Promise<string> {
  if (isTauri()) {
    return await app.getVersion()
  }
  return '0.0.0-browser'  // Use mock value during development
}

// Method 2: Throw explicit error
export async function readFile(path: string): Promise<string> {
  if (isTauri()) {
    return await fs.readTextFile(path)
  }
  throw new Error('File API is only available on desktop')
}

// Method 3: Provide fallback solution
export async function saveData(key: string, value: string): Promise<void> {
  if (isTauri()) {
    await fs.writeTextFile(`data/${key}.txt`, value)
  } else {
    localStorage.setItem(key, value)  // Fallback to localStorage in browser
  }
}

• Single file maintenance, only focus on one implementation
• Browser development with fast hot reload
• Unified interface, easy to use

Usage Examples

Scenario 1: Review Existing Project

1. Check if official plugins are prioritized over custom Rust code
2. Check if there is a frontend API layer encapsulation (e.g.,

   src/api/

   directory)
3. Check if browser development mode is supported
4. Check if plugin import methods are reasonable
5. Propose improvement suggestions

Scenario 2: Implement New Feature

1. Use the official

   @tauri-apps/plugin-clipboard-manager

   plugin
2. Encapsulate API in

   src/api/clipboard.ts

3. Add environment detection to support browser fallback
4. Call the encapsulated API directly in business code

Scenario 3: Performance Optimization Suggestions

1. Reduce custom Rust code, prioritize JS plugins
2. Check for unnecessary dependencies in

   Cargo.toml

3. Use incremental compilation in development mode
4. Consider using frontend encapsulation layer for development in browser

Scenario 4: Architecture Design Consultation

1. Frontend-first: Implement most features with frontend tech stack
2. API layer encapsulation: Unify Tauri API encapsulation in

   src/api/

3. Environment abstraction: Achieve dual-environment support via

   isTauri()

   detection
4. Plugin-first: Prioritize official plugins, avoid writing Rust code

Frequently Asked Questions

Q: When do I need to write Rust code?

• Existing plugins cannot meet requirements → Consider custom Rust code
• Need OS-level special functions → May require Rust
• Performance-sensitive operations (e.g., large data processing) → Can consider Rust

Q: How to handle features not supported by browsers?

1. Return default/mock data (suitable for development stage)
2. Throw explicit error (suitable for mandatory features)
3. Provide fallback solution (e.g., localStorage instead of file system)

Q: What if plugin installation fails once?

• pnpm tauri add

  can only add one plugin at a time
• Need to execute installation commands multiple times
• After installation, configure permissions in

  src-tauri/capabilities/default.json

Q: How to test Tauri applications?

1. Use

   pnpm dev

   for pure frontend development (fast hot reload)
2. Test desktop integration with

   pnpm tauri dev

   after core features are completed
3. Test on target platform with

   pnpm tauri build

   before packaging

Notes

• Tauri Version: This skill is based on Tauri 2.x, not applicable to 1.x
• Plugin Permissions: Configure permissions in

  src-tauri/capabilities/default.json

  after installing plugins
• Dual-Environment Development: Recommended to develop in browser and test on desktop
• Performance Consideration: Reducing Rust code can significantly shorten compilation time
• Security Suggestion: Be cautious when using

  shell

  plugin to execute commands, avoid command injection risks
• Project Association: Recommend using tauri-create skill to create new projects

Reference Resources

• Tauri 2.x Official Documentation
• Tauri Plugin List
• Tauri GitHub