Skip to main content
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.
Ir para a instalação Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/Sheshiyer/skill-clusters --skill integrating-tauri-rust-frontendsO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... Mais deste repositório 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'.
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.
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.
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__
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 }
}
beforeDevCommand: Runs Trunk dev server before TauridevUrl: URL where Trunk serves the frontend (default: 1420 for Leptos, 8080 for plain Trunk)beforeBuildCommand: Builds WASM bundle before packagingfrontendDist: Path to built frontend assetswithGlobalTauri: 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"
target: HTML entry point with Trunk directivesignore: Prevents watching Tauri backend changesport: Must match devUrl in tauri.conf.jsonopen = 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]
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"
js-sys = "0.3"
web-sys = { version = "0.3" , features = ["Window" , "Document" ] }
tauri-wasm = { version = "2" , features = ["all" ] }
leptos = { version = "0.6" , features = ["csr" ] }
[profile.release]
opt-level = "z"
lto = true
codegen-units = 1
panic = "abort"
crate-type = ["cdylib", "rlib"]: Required for WASM compilationtauri-wasm: Provides Rust bindings to Tauri APIsfeatures = ["csr"]: Client-side rendering for frameworkRelease 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 >
data-trunk rel="css": Include CSS filesdata-trunk rel="rust": Compile Rust crate to WASMdata-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).unwrap ();
set_message.set (greeting);
});
};
view! {
<main>
<h1>"Welcome to Tauri + Leptos" </h1>
<button on:click=greet>"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
cargo install trunk
rustup target add wasm32-unknown-unknown
cd src-tauri && cargo tauri dev
cd src-tauri && cargo tauri build
trunk serve --port 1420
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"
[serve.ws]
ws_protocol = "ws"
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" {
#[wasm_bindgen(js_namespace = ["window" , "__TAURI__" , "core" ] , catch)]
async fn invoke (cmd: &str , args: JsValue) -> Result <JsValue, JsValue>;
#[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);
}
async fn call_backend () -> Result <String , String > {
let args = serde_wasm_bindgen::to_value (&serde_json::json!({
"path" : "/some/path"
})).map_err (|e| e.to_string ())?;
let result = invoke ("read_file" , args)
.await
.map_err (|e| format! ("{:?}" , e))?;
serde_wasm_bindgen::from_value (result)
.map_err (|e| e.to_string ())
}
Method 2: Using tauri-wasm Crate use tauri_wasm::api::{core, event, dialog, fs};
let result : MyResponse = core::invoke ("my_command" , &my_args).await ?;
event::listen ("my-event" , |payload| {
}).await ;
event::emit ("my-event" , &payload).await ;
let file = dialog::open (dialog::OpenDialogOptions::default ()).await ?;
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 trueCheck 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.
