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`.