Vite-plugin-tauri NPM

vite-plugin-tauri

Integrate Tauri in a Vite project to build cross-platform apps

Install

Make sure to setup your environment for Tauri development.

# 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

Usage

// 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,
  },
});

Configuration

See the configuration options and documenation here.

Advanced Usage

Use a separate config for Tauri

Create a vite.config.tauri.js with the following content

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

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

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

Modify package.json:

// 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"
  },
  ..
}

Now you can build or develop Tauri without chaning your existing web dev flow.