integrating-tauri-js-frontends

Configures JavaScript frontend frameworks for Tauri v2 desktop applications with static output.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Integrating modern JavaScript frameworks with Tauri v2 fails when frameworks default to server-side rendering, since Tauri can only serve pre-built static files through its native webview. This Skill provides the exact configuration needed to make Next.js, Nuxt, SvelteKit, Qwik, and Vite work correctly with Tauri. ## Core Features & Use Cases - Framework-Specific Configuration: Ready-to-use configs for Vite, Next.js, Nuxt, SvelteKit, and Qwik covering tauri.conf.json, dev servers, and build output directories. - SSG Enforcement: Ensures SSR is disabled and static export is enabled so frontends run inside Tauri's webview without a Node.js server. - Troubleshooting Guidance: Solutions for common issues like assets not loading, Tauri APIs unavailable at build time, hot reload failures, and mobile dev server access. - Use Case: You are building a Tauri v2 desktop app with Next.js and the build fails with SSR errors. This Skill tells you to set output: 'export', disable image optimization, and point frontendDist to the out directory. ## Quick Start Ask the assistant to configure your Next.js project for Tauri v2 with static export and the correct tauri.conf.json build settings.

Frequently Asked Questions about integrating-tauri-js-frontends

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

FAQPage Schema
How do I configure Next.js for a Tauri v2 desktop app?

Set `output: 'export'` in next.config, disable image optimization with `images: { unoptimized: true }`, and set an assetPrefix pointing to the dev server. In tauri.conf.json, point `frontendDist` to the `out` directory and `devUrl` to port 3000.

How to disable SSR in Nuxt for Tauri integration?

Set `ssr: false` in nuxt.config.ts and use `nuxt generate` as the build command to produce static files. Server routes under `/server/api` are unavailable, so use Tauri commands for backend functionality instead.

Does Tauri v2 support server-side rendering frameworks?

No, Tauri cannot run a Node.js server, so SSR is not supported in any form. All frameworks must be configured for static output: Next.js with export mode, Nuxt with ssr false, SvelteKit with adapter-static, and Qwik with its static adapter.

Why are Tauri APIs unavailable during my SvelteKit build?

Load functions execute at build time during prerendering, where the Tauri API does not exist. Disable prerendering for pages using Tauri APIs, check for `window.__TAURI__` before calls, or use SPA mode with `fallback: 'index.html'`.

Why is hot reload not working in my Tauri Vite project?

The file watcher is likely watching the `src-tauri` directory, causing restart loops. Add `**/src-tauri/**` to the watch ignore list in your Vite config and set `strictPort: true` so the dev server matches tauri.conf.json.

Can I do mobile development with Tauri and a JavaScript frontend?

Yes, but the dev server must be reachable on your network. Set the server host to `0.0.0.0` or use the `TAURI_DEV_HOST` environment variable, then run `tauri ios dev` or `tauri android dev`.