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

Integrate Tauri in a Vite project to build cross-platform apps.
https://github.com/amrbashir/vite-plugin-tauri

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/amrbashir/vite-plugin-tauri
• Owner: amrbashir
• License: mit
• Created: 2021-12-12T18:42:50.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2024-09-17T22:53:39.000Z (about 2 months ago)
• Last Synced: 2024-10-19T23:57:53.917Z (16 days ago)
• Language: TypeScript
• Size: 1.69 MB
• Stars: 157
• Watchers: 1
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-vite - vite-plugin-tauri - Integrate Tauri in a Vite project to build cross-platform apps. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-tauri - Integrate Tauri in a Vite project to build cross-platform apps. (Plugins / Framework-agnostic Plugins)
• awesome-tauri - vite-plugin-tauri - Integrate Tauri in a Vite project to build cross-platform apps. (Development / Integrations)

README

        
[![StandWithPalestine](https://raw.githubusercontent.com/Safouene1/support-palestine-banner/master/StandWithPalestine.svg)](https://techforpalestine.org/learn-more)

# vite-plugin-tauri

Integrate [Tauri](https://github.com/tauri-apps/tauri) in a [Vite](https://github.com/vitejs/vite) project to build cross-platform apps

[![NPM Version](https://img.shields.io/npm/v/vite-plugin-tauri)](https://www.npmjs.com/package/vite-plugin-tauri)

## Install

> Make sure to [setup your environment](https://tauri.studio/en/docs/getting-started/intro#setting-up-your-environment) for Tauri development.

```sh

# 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

```ts

// 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,

  },

});

```

## Tauri CLI arguments

You can pass arguments to the tauri CLI by prefixing the args with `-- -t/--tauri`, for example:

```sh

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

```

The `--` is necessary, otherwise `vite` will crash with unkown CLI argument and `-t` or `--tauri` marks the start of the tauri arguments.

## Advanced Usage

### Using a separate config for Tauri

You can also use a separate config file to add the `vite-plugin-tauri` plugin

which allows you to define a separate script in `package.json` to develop

your tauri app that won't conflict with your normal vite web development flow.

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

   ```ts

   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,

       },

     }),

   );

   ```

2. Modify `package.json`:

   ```diff

   // 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"

     },

     ..

   }

   ```

## License

[MIT](./LICENSE) © Amr Bashir