integrating-tauri-rust-frontends

Configure Rust WASM frontend frameworks with Tauri v2 using Trunk bundling.

Updated Jun 7, 2026
One-click install
npx skills add https://github.com/dt418/better-shot-x --skill integrating-tauri-rust-frontends-dt418
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: integrating-tauri-rust-frontends
Source: https://github.com/dt418/better-shot-x/tree/main/.agents/skills/integrating-tauri-rust-frontends
Command: npx skills add https://github.com/dt418/better-shot-x --skill integrating-tauri-rust-frontends-dt418

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting up a Rust-based WASM frontend (Leptos, Yew, Dioxus, Sycamore) inside a Tauri v2 desktop or mobile app involves many interlocking configuration files, and small mistakes in Trunk.toml, tauri.conf.json, or Cargo.toml cause WASM loading failures, broken hot-reload, or undefined Tauri APIs. ## Core Features & Use Cases - Complete Configuration Templates: Provides working tauri.conf.json, Trunk.toml, Cargo.toml, and index.html setups with explanations of critical settings like withGlobalTauri, crate-type, and ws_protocol. - Framework-Specific Guidance: Includes Leptos component examples showing how to invoke Tauri backend commands via wasm-bindgen or the tauri-wasm crate. - Mobile Development Support: Covers the extra configuration needed for mobile hot-reload, including listening on 0.0.0.0 and using a local IP as devUrl. - Use Case: You are building a cross-platform desktop app with a Leptos frontend and need to call a Rust backend command from a button click; this Skill gives you the exact project structure, dependencies, and invoke pattern to make it work. ## Quick Start Set up a new Tauri v2 project with a Leptos WASM frontend, including Trunk configuration and a working greet command example.

Frequently Asked Questions about integrating-tauri-rust-frontends

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate a Leptos frontend with Tauri v2?

Use Trunk as the bundler, set crate-type to ["cdylib", "rlib"] in Cargo.toml, enable the csr feature on Leptos, and set withGlobalTauri to true in tauri.conf.json. Point beforeDevCommand to trunk serve and frontendDist to the dist output directory.

How do I call Tauri backend commands from a WASM frontend?

Either declare an extern binding to window.__TAURI__.core.invoke with wasm-bindgen, or use the tauri-wasm crate's core::invoke function. Both require withGlobalTauri enabled and arguments serialized with serde-wasm-bindgen or serde_json.

Does Tauri support server-side rendering with Rust frameworks?

No, Tauri does not support server-based solutions like SSR. You must use static site generation, single-page, or multi-page approaches with client-side rendering features such as Leptos csr.

Why is window.__TAURI__ undefined in my WASM app?

This happens when withGlobalTauri is not set to true in tauri.conf.json under the app section. Also verify the tauri-wasm crate version matches your Tauri version and check the browser console for WASM loading errors.

Why is hot-reload not working on mobile Tauri development?

Mobile hot-reload requires ws_protocol = "ws" in Trunk.toml and serving on address 0.0.0.0 so the device can connect. Set devUrl in tauri.conf.json to your machine's local IP and ensure the firewall allows the dev port.

How do I reduce WASM binary size in a Tauri app?

Set opt-level = "z", lto = true, codegen-units = 1, and panic = "abort" in the release profile of Cargo.toml. You can also use data-wasm-opt="z" in the Trunk directive in index.html for post-processing optimization.