{"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,"search_vec":"'/api':68 '7.0.0':103 'actual':43 'allow':59 'api':23 'app':67 'applic':15 'backend':45 'break':114 'browser':6,19,61 'cadenc':111 'call':24 'chang':115 'client':62 'command':40 'dev':52,108 'develop':35 'devic':88 'differenti':78 'enabl':11 'experiment':113 'forward':38 'hmr':93 'inject':55 'insid':73 'integr':48 'ipc':39 'javascript':117 'key':77 'leader':27,30 'like':116 'live':90 'machin':36 'need':80 'physic':82 'plugin':2,8,47 'proxi':21,58 'releas':110 'reload':91 'remot':18,60,87 'requir':101 'run':12,32,106 'runtim':84 'server':53,109 'support':89 'tauri':3,14,22,44,66,75,83,97,107 'tauri-app':65 'typescript':118 'use':64 'v0.1.1':9 'v1':98 'v2':100 'vite':1,7,50,102 'websocket':57 'webview':28,31 'window':76 'work':95","created_at":"2026-05-01T13:50:49.348410+00:00","updated_at":"2026-05-01T13:50:49.348410+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vite-plugin-tauri-in-the-browser","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","http-networking"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-05-01","next_check":"2026-07-30","install_tag":null}}