Vite Plugin Tauri in the Browser

0.1.1 verified Fri May 01 auth: no javascript

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.

Common errors

error Error: Cannot find module 'vite-plugin-tauri-in-the-browser' ↓

cause Package not installed or incorrect import path (e.g., using require()).

fix

Install as dev dependency: npm install -D vite-plugin-tauri-in-the-browser. Use ESM import only.

error Error: Plugin vitePluginTauriInTheBrowser: Invalid config - leaderUrl must be a valid URL. ↓

cause leaderUrl option provided is not a valid URL string or undefined when expected.

fix

Ensure leaderUrl is a string starting with http:// or https://, or omit to use default.

error WebSocket connection to 'ws://localhost:1421' failed: Connection refused ↓

cause The leader WebView's WebSocket server is not running or port is blocked.

fix

Start the Tauri dev server first, then the Vite dev server. If using a non-default port, configure wsPort in plugin options.

error invoke is not a function in browser context ↓

cause Tauri API not properly proxied; plugin may not be loaded or misconfigured.

fix

Check that plugin is added in vite.config.ts and that the remote browser has WebSocket access to the leader.

Warnings

breaking Requires Vite ^7.0.0; incompatible with older Vite versions. ↓

fix Upgrade to Vite 7.x or stay on previous plugin version if using lower Vite.

gotcha The leader WebView must be running and accessible from the remote browser (no localhost binding). ↓

fix Ensure Tauri dev server is bound to 0.0.0.0 or an accessible IP, not just localhost.

deprecated Plugin configuration may change significantly in future versions; not stable API. ↓

fix Pin version and monitor changelog before upgrading.

gotcha Tauri v1 vs v2 IPC differences may cause silent failures; plugin works with both but command signatures vary. ↓

fix Verify Tauri API version compatibility; refer to Tauri migration guide.

breaking WebSocket proxy uses a separate port (default 1421); must be open in firewall for remote clients. ↓

fix Configure firewall to allow the wsPort; alternatively tunnel through SSH or VPN.

gotcha Not all Tauri plugins may work remotely; native features like window management may be limited. ↓

fix Test specific Tauri API calls; fallback to conditional code if running in browser vs Tauri.

Install

npm install vite-plugin-tauri-in-the-browser

yarn add vite-plugin-tauri-in-the-browser

pnpm add vite-plugin-tauri-in-the-browser

Imports

vitePluginTauriInTheBrowser

wrong

const vitePluginTauriInTheBrowser = require('vite-plugin-tauri-in-the-browser')

correct

import { vitePluginTauriInTheBrowser } from 'vite-plugin-tauri-in-the-browser'

ESM-only; does not support CommonJS require.

default

wrong

const plugin = require('vite-plugin-tauri-in-the-browser').default

correct

import vitePluginTauriInTheBrowser from 'vite-plugin-tauri-in-the-browser'

Default import also available, but named export preferred for clarity.

PluginConfig

wrong

import { PluginConfig } from 'vite-plugin-tauri-in-the-browser'

correct

import type { PluginConfig } from 'vite-plugin-tauri-in-the-browser'

PluginConfig is a TypeScript type, not a runtime value. Use import type.

Quickstart

Configures Vite plugin to proxy Tauri API calls from a remote browser through a leader WebView; includes example invoke call.

// vite.config.ts
import { defineConfig } from 'vite';
import { vitePluginTauriInTheBrowser } from 'vite-plugin-tauri-in-the-browser';

// Ensure Tauri dev server is running (e.g., `cargo tauri dev`)
export default defineConfig({
  plugins: [
    vitePluginTauriInTheBrowser({
      // Optional: specify leader WebView URL (default: http://localhost:1420)
      leaderUrl: process.env.TAURI_DEV_HOST
        ? `http://${process.env.TAURI_DEV_HOST}:1420`
        : 'http://localhost:1420',
      // Optional: override the WebSocket port
      wsPort: 1421,
    }),
  ],
});

// In your frontend code (e.g., main.ts):
import { invoke } from '@tauri-apps/api/core';
// Works normally – calls are proxied through leader WebView
const response = await invoke('greet', { name: 'World' });
console.log(response);