DOCSEARCHbyAlgolia
Submit Docs

vite-plugin-tauri

repository·master·Indexed 43 days ago

https://github.com/amrbashir/vite-plugin-tauri

A Vite plugin for seamless integration between the Vite build tool and the Tauri framework to build cross-platform desktop applications. Version 4.0.0 automates the Tauri CLI lifecycle for development and production, handling devUrl and frontendDist configuration and providing automatic project initialization.

Tokens
1.6K
Snippets
6
Records
7
Agent score
5%

What's inside vite-plugin-tauri

  1. Configure vite-plugin-tauri in Vite

    master

    To use the plugin, import tauri from vite-plugin-tauri and add it to the plugins array in your vite.config.js.

    It is highly recommended to set clearScreen: false and server.open: false to prevent the Vite development server from interfering with the Tauri CLI output or automatically opening a browser window.

    // vite.config.js
import { defineConfig } from "vite";
import tauri from "vite-plugin-tauri"; // 1. import the plugin

export default defineConfig({
	plugins: [
		tauri(), // 2. add it to the plugins list
	],

	// 3. optional but recommended
	clearScreen: false,
	server: {
		open: false,
	},
});

  2. Install vite-plugin-tauri

    master

    To integrate Tauri into a Vite project, install vite-plugin-tauri and the @tauri-apps/cli as development dependencies.

    Note: Ensure you have already completed the Tauri environment setup before proceeding.

    # pnpm
pnpm add -D vite-plugin-tauri @tauri-apps/cli

# yarn
yarn add -D vite-plugin-tauri @tauri-apps/cli

# npm
npm i -D vite-plugin-tauri @tauri-apps/cli

  3. Pass arguments to the Tauri CLI

    master

    When running Vite scripts, you can pass arguments directly to the Tauri CLI by using the -- separator followed by the -t or --tauri flag. The -- tells Vite to stop parsing arguments and pass everything following it to the underlying command.

    Example: pnpm dev -- -t --verbose --release

    pnpm dev -- -t --verbose --release

  4. Use a separate config for Tauri development

    master

    To avoid conflicts between standard web development and Tauri development, you can create a dedicated Vite configuration file specifically for Tauri. This allows you to keep your main vite.config.js clean for web workflows while applying Tauri-specific settings (like the plugin and server options) in a separate file.

    1. Create vite.config.tauri.js

    Use mergeConfig to extend your base Vite configuration with the Tauri plugin and recommended settings.

    2. Update package.json scripts

    Add new scripts that point to the specific Tauri configuration file using the --config flag.

    // vite.config.tauri.js
import { defineConfig, mergeConfig } from "vite";
import baseViteConfig from "./vite.config";
import tauri from "vite-plugin-tauri";

export default defineConfig(
	mergeConfig(baseViteConfig, {
		plugins: [tauri()],

		// optional but recommended
		clearScreen: false,
		server: {
			open: false,
		},
	}),
);
    // package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "dev:tauri": "vite --config vite.config.tauri.js",
    "build:tauri": "vite build --config vite.config.tauri.js",
    "preview": "vite preview"
  }
}

  5. How the plugin handles Tauri configuration and initialization

    master

    The plugin searches for existing Tauri configuration files to determine how to bridge Vite and Tauri.

    Configuration Discovery

    The plugin looks for the following files:

    • tauri.conf.json
    • tauri.conf.json5
    • Tauri.toml

    You can control how deep the plugin searches for these files by setting the TAURI_PATH_DEPTH environment variable. If not set, it defaults to a depth of 3.

    Automatic Initialization

    If no configuration file is found during the serve or build process, the plugin will trigger an interactive prompt in the terminal: "Couldn't find a Tauri project in current directory, would you like to initialize a new one?"

    If confirmed, it runs tauri init using your package.json name as the app name and automatically injects the necessary Vite-related paths into the new configuration.

  6. Passing arguments to the Tauri CLI via vite-plugin-tauri

    master

    The plugin allows you to pass additional arguments directly to the underlying Tauri CLI commands. It looks for a double-dash (--) in your command line arguments. Any arguments following the -t or --tauri flag after the double-dash are captured and passed to the Tauri CLI.

    For example, if you want to pass specific flags to the Tauri CLI when running your Vite dev server, you can use the following pattern in your terminal:

    npm run dev -- --tauri <tauri-specific-args>
    # Example of passing arguments to Tauri via the plugin
npm run dev -- --tauri dev --some-tauri-flag

  7. Use the tauri() plugin in vite.config.ts

    master

    The tauri() function is a Vite plugin that automates the integration between Vite and the Tauri CLI. It handles two main lifecycles:

    1. Development (serve): When running the Vite dev server, the plugin automatically detects the server's local address and port, then triggers the Tauri CLI to run the application, injecting the correct devUrl (or devPath for Tauri v1) into the Tauri configuration.
    2. Production (build): When building the project, the plugin calculates the relative path between your Tauri configuration and Vite's output directory, then triggers the Tauri CLI build command with the correct frontendDist (or distDir for Tauri v1) setting.

    If the plugin cannot find a Tauri configuration file (tauri.conf.json, tauri.conf.json5, or Tauri.toml), it will prompt you to initialize a new Tauri project automatically.

    import { defineConfig } from 'vite';
import tauri from 'vite-plugin-tauri';

export default defineConfig({
  plugins: [tauri()],
});