{"id":26600,"library":"vite-plugin-tauri-in-the-browser","title":"Vite Plugin Tauri in the Browser","description":"Vite plugin (v0.1.1) that enables running a Tauri application in a remote browser by proxying Tauri API calls through a leader WebView. The leader WebView runs on the development machine and forwards IPC commands to the actual Tauri backend. This plugin integrates with Vite's dev server to inject a WebSocket proxy, allowing remote browser clients to use `@tauri-apps/api` as if they were inside a Tauri window. Key differentiators: no need for physical Tauri runtime on the remote device, supports live reload and HMR, and works with Tauri v1 and v2. Requires Vite ^7.0.0 and a running Tauri dev server. Release cadence is experimental; breaking changes likely.","status":"active","version":"0.1.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-tauri-in-the-browser","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-tauri-in-the-browser","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-tauri-in-the-browser","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; plugin requires Vite >=7.0.0","package":"vite","optional":false},{"reason":"runtime dependency for Tauri IPC calls that are proxied; must be installed in the Tauri frontend project","package":"@tauri-apps/api","optional":false}],"imports":[{"note":"ESM-only; does not support CommonJS require.","wrong":"const vitePluginTauriInTheBrowser = require('vite-plugin-tauri-in-the-browser')","symbol":"vitePluginTauriInTheBrowser","correct":"import { vitePluginTauriInTheBrowser } from 'vite-plugin-tauri-in-the-browser'"},{"note":"Default import also available, but named export preferred for clarity.","wrong":"const plugin = require('vite-plugin-tauri-in-the-browser').default","symbol":"default","correct":"import vitePluginTauriInTheBrowser from 'vite-plugin-tauri-in-the-browser'"},{"note":"PluginConfig is a TypeScript type, not a runtime value. Use import type.","wrong":"import { PluginConfig } from 'vite-plugin-tauri-in-the-browser'","symbol":"PluginConfig","correct":"import type { PluginConfig } from 'vite-plugin-tauri-in-the-browser'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport { vitePluginTauriInTheBrowser } from 'vite-plugin-tauri-in-the-browser';\n\n// Ensure Tauri dev server is running (e.g., `cargo tauri dev`)\nexport default defineConfig({\n  plugins: [\n    vitePluginTauriInTheBrowser({\n      // Optional: specify leader WebView URL (default: http://localhost:1420)\n      leaderUrl: process.env.TAURI_DEV_HOST\n        ? `http://${process.env.TAURI_DEV_HOST}:1420`\n        : 'http://localhost:1420',\n      // Optional: override the WebSocket port\n      wsPort: 1421,\n    }),\n  ],\n});\n\n// In your frontend code (e.g., main.ts):\nimport { invoke } from '@tauri-apps/api/core';\n// Works normally – calls are proxied through leader WebView\nconst response = await invoke('greet', { name: 'World' });\nconsole.log(response);","lang":"typescript","description":"Configures Vite plugin to proxy Tauri API calls from a remote browser through a leader WebView; includes example invoke call."},"warnings":[{"fix":"Upgrade to Vite 7.x or stay on previous plugin version if using lower Vite.","message":"Requires Vite ^7.0.0; incompatible with older Vite versions.","severity":"breaking","affected_versions":"<0.1.0"},{"fix":"Ensure Tauri dev server is bound to 0.0.0.0 or an accessible IP, not just localhost.","message":"The leader WebView must be running and accessible from the remote browser (no localhost binding).","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Pin version and monitor changelog before upgrading.","message":"Plugin configuration may change significantly in future versions; not stable API.","severity":"deprecated","affected_versions":">=0.1.0"},{"fix":"Verify Tauri API version compatibility; refer to Tauri migration guide.","message":"Tauri v1 vs v2 IPC differences may cause silent failures; plugin works with both but command signatures vary.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Configure firewall to allow the wsPort; alternatively tunnel through SSH or VPN.","message":"WebSocket proxy uses a separate port (default 1421); must be open in firewall for remote clients.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Test specific Tauri API calls; fallback to conditional code if running in browser vs Tauri.","message":"Not all Tauri plugins may work remotely; native features like window management may be limited.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Install as dev dependency: npm install -D vite-plugin-tauri-in-the-browser. Use ESM import only.","cause":"Package not installed or incorrect import path (e.g., using require()).","error":"Error: Cannot find module 'vite-plugin-tauri-in-the-browser'"},{"fix":"Ensure leaderUrl is a string starting with http:// or https://, or omit to use default.","cause":"leaderUrl option provided is not a valid URL string or undefined when expected.","error":"Error: Plugin vitePluginTauriInTheBrowser: Invalid config - leaderUrl must be a valid URL."},{"fix":"Start the Tauri dev server first, then the Vite dev server. If using a non-default port, configure wsPort in plugin options.","cause":"The leader WebView's WebSocket server is not running or port is blocked.","error":"WebSocket connection to 'ws://localhost:1421' failed: Connection refused"},{"fix":"Check that plugin is added in vite.config.ts and that the remote browser has WebSocket access to the leader.","cause":"Tauri API not properly proxied; plugin may not be loaded or misconfigured.","error":"invoke is not a function in browser context"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}