integrating-tauri-rust-frontends

Integrating Rust/WASM frontend frameworks (Leptos, Yew, Dioxus, Sycamore) with Tauri v2 via Trunk, covering WASM compilation, Cargo.toml and Trunk.toml config, and withGlobalTauri API access. USE WHEN building a Tauri v2 app with a Rust/WASM frontend or wiring up Trunk.

跳到安装

仓库: Sheshiyer/skill-clusters
最近来源活动: 2026年6月5日 00:08
检测到的 SKILL.md 语言: 英语
星标: 0
分支: 1

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/Sheshiyer/skill-clusters --skill integrating-tauri-rust-frontends

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

SKILL.md

来源说明 · 只读预览

返回搜索返回安装

arcplume

Arcplume runs Grok through the Grok Build CLI's own OAuth-authenticated session (grok login) for image generation, with strict preflight validation, secret-safe handling, and headless CLI-driven execution -- no separate XAI_API_KEY billing. Video falls back to the billed xAI API. USE WHEN a user wants to generate an image via a locally logged-in Grok Build CLI session, e.g. 'generate an image with grok', 'use grok build', or 'use my logged-in grok session'.

2026-07-07

selemene-core

Shared reference for the Selemene cluster: the two report surfaces (deterministic Rust reports vs. narrative witness-pipeline readings), the @selemene/bridge CLI contract, the output manifest format, and non-prescriptive witnessing tone. USE WHEN deciding which Selemene surface to invoke or when routing between birth/compatibility/transit reports and solo/dyadic readings.

2026-07-07

selemene-orchestrator

Route Selemene Engine tasks to the right surface: deterministic reports (birth/compatibility/transit) via selemene-core and the @selemene/bridge CLI, or narrative witness readings via selemene-report. USE WHEN the user wants anything under the Selemene/Noesis umbrella but has not named the exact surface.

2026-07-07

查看这个仓库的全部 Skills

name	integrating-tauri-rust-frontends
description	Integrating Rust/WASM frontend frameworks (Leptos, Yew, Dioxus, Sycamore) with Tauri v2 via Trunk, covering WASM compilation, Cargo.toml and Trunk.toml config, and withGlobalTauri API access. USE WHEN building a Tauri v2 app with a Rust/WASM frontend or wiring up Trunk.
cluster	tauri
version	1.0.0

Tauri Rust/WASM Frontend Integration

This skill covers integrating Rust-based frontend frameworks with Tauri v2 for building desktop and mobile applications with WASM.

Supported Frameworks

Framework	Description	Bundler
Leptos	Reactive Rust framework for building web UIs	Trunk
Yew	Component-based Rust framework	Trunk
Dioxus	Cross-platform UI framework	Trunk
Sycamore	Reactive library for Rust	Trunk

All Rust/WASM frontends use Trunk as the bundler/dev server.

Critical Requirements

Static Site Generation (SSG) Only - Tauri does not support server-based solutions (SSR). Use SSG, SPA, or MPA approaches.
withGlobalTauri - Must be enabled for WASM frontends to access Tauri APIs via window.__TAURI__ and wasm-bindgen.
WebSocket Protocol - Configure ws_protocol = "ws" for hot-reload on mobile development.

Project Structure

my-tauri-app/
├── src/
│   ├── main.rs          # Rust frontend entry point
│   └── app.rs           # Application component
├── src-tauri/
│   ├── src/
│   │   └── main.rs      # Tauri backend
│   ├── Cargo.toml       # Tauri dependencies
│   └── tauri.conf.json  # Tauri configuration
├── index.html           # HTML entry point for Trunk
├── Cargo.toml           # Frontend dependencies
├── Trunk.toml           # Trunk bundler configuration
└── dist/                # Build output (generated)

Configuration Files

Tauri Configuration (src-tauri/tauri.conf.json)

{
  "build": {
    "beforeDevCommand": "trunk serve",
    "devUrl": "http://localhost:1420",
    "beforeBuildCommand": "trunk build",
    "frontendDist": "../dist"
  },
  "app": {
    "withGlobalTauri": true
  }
}

Key settings:

beforeDevCommand: Runs Trunk dev server before Tauri
devUrl: URL where Trunk serves the frontend (default: 1420 for Leptos, 8080 for plain Trunk)
beforeBuildCommand: Builds WASM bundle before packaging
frontendDist: Path to built frontend assets
withGlobalTauri: Required for WASM - Exposes window.__TAURI__ for API access

Trunk Configuration (Trunk.toml)

[build]
target = "./index.html"
dist = "./dist"

[watch]
ignore = ["./src-tauri"]

[serve]
port = 1420
open = false

[serve.ws]
ws_protocol = "ws"

Key settings:

target: HTML entry point with Trunk directives
ignore: Prevents watching Tauri backend changes
port: Must match devUrl in tauri.conf.json
open = false: Prevents browser auto-open (Tauri handles display)
ws_protocol = "ws": Required for mobile hot-reload

Frontend Cargo.toml (Root)

[package]
name = "my-app-frontend"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
# Core WASM dependencies
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"
js-sys = "0.3"
web-sys = { version = "0.3", features = ["Window", "Document"] }

# Tauri API bindings for WASM
tauri-wasm = { version = "2", features = ["all"] }

# Choose your framework:
# For Leptos:
leptos = { version = "0.6", features = ["csr"] }
# For Yew:
# yew = { version = "0.21", features = ["csr"] }
# For Dioxus:
# dioxus = { version = "0.5", features = ["web"] }

[profile.release]
opt-level = "z"
lto = true
codegen-units = 1
panic = "abort"

Key settings:

crate-type = ["cdylib", "rlib"]: Required for WASM compilation
tauri-wasm: Provides Rust bindings to Tauri APIs
features = ["csr"]: Client-side rendering for framework
Release profile optimized for small WASM binary size

HTML Entry Point (index.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My Tauri App</title>
    <link data-trunk rel="css" href="styles.css" />
</head>
<body>
    <div id="app"></div>
    <link data-trunk rel="rust" href="." data-wasm-opt="z" />
</body>
</html>

Trunk directives:

data-trunk rel="css": Include CSS files
data-trunk rel="rust": Compile Rust crate to WASM
data-wasm-opt="z": Optimize for size

Leptos Setup

Leptos-Specific Cargo.toml

[package]
name = "my-leptos-app"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
leptos = { version = "0.6", features = ["csr"] }
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"
console_error_panic_hook = "0.1"
tauri-wasm = { version = "2", features = ["all"] }

[profile.release]
opt-level = "z"
lto = true

Leptos Main Entry (src/main.rs)

use leptos::*;

mod app;
use app::App;

fn main() {
    console_error_panic_hook::set_once();
    mount_to_body(|| view! { <App /> });
}

Leptos App Component (src/app.rs)

use leptos::*;
use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::spawn_local;

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "core"])]
    async fn invoke(cmd: &str, args: JsValue) -> JsValue;
}

#[component]
pub fn App() -> impl IntoView {
    let (message, set_message) = create_signal(String::new());

    let greet = move |_| {
        spawn_local(async move {
            let args = serde_json::json!({ "name": "World" });
            let args_js = serde_wasm_bindgen::to_value(&args).unwrap();
            let result = invoke("greet", args_js).await;
            let greeting: String = serde_wasm_bindgen::from_value(result).();
            set_message.(greeting);
        });
    };

    view! {
        <main>
            <h1></h1>
            <button on:click=greet></button>
            <p>{message}</p>
        </main>
    }
}

Alternative: Using tauri-wasm Crate

use leptos::*;
use tauri_wasm::api::core::invoke;

#[component]
pub fn App() -> impl IntoView {
    let (message, set_message) = create_signal(String::new());

    let greet = move |_| {
        spawn_local(async move {
            let result: String = invoke("greet", &serde_json::json!({ "name": "World" }))
                .await
                .unwrap();
            set_message.set(result);
        });
    };

    view! {
        <main>
            <button on:click=greet>"Greet"</button>
            <p>{message}</p>
        </main>
    }
}

Tauri Backend Command

In src-tauri/src/main.rs:

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}

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

Development Commands

# Install Trunk
cargo install trunk

# Add WASM target
rustup target add wasm32-unknown-unknown

# Development (runs Trunk + Tauri)
cd src-tauri && cargo tauri dev

# Build for production
cd src-tauri && cargo tauri build

# Trunk only (for frontend debugging)
trunk serve --port 1420

# Build WASM only
trunk build --release

Mobile Development

For mobile platforms, additional configuration is needed:

Trunk.toml for Mobile

[serve]
port = 1420
open = false
address = "0.0.0.0"  # Listen on all interfaces for mobile

[serve.ws]
ws_protocol = "ws"   # Required for mobile hot-reload

tauri.conf.json for Mobile

{
  "build": {
    "beforeDevCommand": "trunk serve --address 0.0.0.0",
    "devUrl": "http://YOUR_LOCAL_IP:1420"
  }
}

Replace YOUR_LOCAL_IP with your machine's local IP (e.g., 192.168.1.100).

Accessing Tauri APIs from WASM

Method 1: Direct wasm-bindgen (Recommended for control)

use wasm_bindgen::prelude::*;
use serde::{Serialize, Deserialize};

#[wasm_bindgen]
extern "C" {
    // Core invoke
    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "core"], catch)]
    async fn invoke(cmd: &str, args: JsValue) -> Result<JsValue, JsValue>;

    // Event system
    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "event"])]
    async fn listen(event: &str, handler: &Closure<dyn Fn(JsValue)>) -> JsValue;

    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "event"])]
    async fn emit(event: &str, payload: JsValue);
}

// Usage
async fn call_backend() -> Result<String, String> {
    let args = serde_wasm_bindgen::to_value(&serde_json::json!({
        "path": "/some/path"
    })).map_err(|e| e.())?;

      = (, args)
        .
        .(|e| (, e))?;

    serde_wasm_bindgen::(result)
        .(|e| e.())
}

Method 2: Using tauri-wasm Crate

use tauri_wasm::api::{core, event, dialog, fs};

// Invoke command
let result: MyResponse = core::invoke("my_command", &my_args).await?;

// Listen to events
event::listen("my-event", |payload| {
    // Handle event
}).await;

// Emit events
event::emit("my-event", &payload).await;

// File dialogs
let file = dialog::open(dialog::OpenDialogOptions::default()).await?;

// File system (requires permissions)
let contents = fs::read_text_file("path/to/file").await?;

Troubleshooting

WASM not loading

Verify withGlobalTauri: true in tauri.conf.json
Check browser console for WASM errors
Ensure wasm32-unknown-unknown target is installed

Hot-reload not working on mobile

Set ws_protocol = "ws" in Trunk.toml
Use address = "0.0.0.0" for mobile access
Verify firewall allows connections on dev port

Tauri APIs undefined

withGlobalTauri must be true
Check window.__TAURI__ exists in browser console
Verify tauri-wasm version matches Tauri version

Large WASM binary size

Enable release profile optimizations
Use opt-level = "z" for size optimization
Enable LTO with lto = true
Consider wasm-opt post-processing

Trunk build fails

Check Cargo.toml has crate-type = ["cdylib", "rlib"]
Verify index.html has correct data-trunk directives
Ensure no server-side features enabled in framework

Version Compatibility

Component	Version
Tauri	2.x
Trunk	0.17+
Leptos	0.6+
wasm-bindgen	0.2.x
tauri-wasm	2.x

Always match tauri-wasm version with your Tauri version.

integrating-tauri-rust-frontends

来源信息

安装方式

检查来源文件

同仓库更多 Skills

同仓库更多 Skills

Tauri Rust/WASM Frontend Integration

Supported Frameworks

Critical Requirements

Project Structure

Configuration Files

Tauri Configuration (src-tauri/tauri.conf.json)

Trunk Configuration (Trunk.toml)

Frontend Cargo.toml (Root)

HTML Entry Point (index.html)

Leptos Setup

Leptos-Specific Cargo.toml

Leptos Main Entry (src/main.rs)

Leptos App Component (src/app.rs)

Alternative: Using tauri-wasm Crate

Tauri Backend Command

Development Commands

Mobile Development

Trunk.toml for Mobile

tauri.conf.json for Mobile

Accessing Tauri APIs from WASM

Method 1: Direct wasm-bindgen (Recommended for control)

Method 2: Using tauri-wasm Crate

Troubleshooting

WASM not loading

Hot-reload not working on mobile

Tauri APIs undefined

Large WASM binary size

Trunk build fails

Version Compatibility

Tauri Rust/WASM Frontend Integration

Supported Frameworks

Critical Requirements

Project Structure

Configuration Files

Tauri Configuration (src-tauri/tauri.conf.json)

Trunk Configuration (Trunk.toml)

Frontend Cargo.toml (Root)

HTML Entry Point (index.html)

Leptos Setup

Leptos-Specific Cargo.toml

Leptos Main Entry (src/main.rs)

Leptos App Component (src/app.rs)

Alternative: Using tauri-wasm Crate

Tauri Backend Command

Development Commands

Mobile Development

Trunk.toml for Mobile

tauri.conf.json for Mobile

Accessing Tauri APIs from WASM

Method 1: Direct wasm-bindgen (Recommended for control)

Method 2: Using tauri-wasm Crate

Troubleshooting

WASM not loading

Hot-reload not working on mobile

Tauri APIs undefined

Large WASM binary size

Trunk build fails

Version Compatibility