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

Overview

vite-plugin-tauri

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

NPM Version

Install

Make sure to setup your environment for Tauri development.

This package requires Node.js version ^12.20.0 || ^14.13.1 || >=16.0.0

# pnpm
pnpm add -D vite-plugin-tauri
# yarn
yarn add -D vite-plugin-tauri
# npm
npm i -D vite-plugin-tauri
// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
+   "vite-tauri": "vite-tauri",
  }
}

Usage

# pnpm
pnpm vite-tauri <subcommand>
# yarn
yarn vite-tauri <subcommand>
# npm
npm run vite-tauri <subcommand>

Supported Subcommands:

  • dev - Starts your Vite/Tauri app with hot reload.
  • build - Builds your Vite/Tauri executable and installer.
  • Other Tauri CLI subcommands and flags are supported.

Note:

Running dev or build will initialize Tauri and add src-tauri folder if it doesn't exist.

License

MIT License © 2021 Amr Bashir

Comments
  • cant build after update

    cant build after update

    hey I think the problem is related to this project ?

    Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\xxxx\Desktop\project\app\x\node_modules\.pnpm\[email protected]_a51533014e25e427fd41fc3dc0737403\node_modules\@tauri-apps\cli\main' imported from C:\Users\xxxx\Desktop\project\app\x\node_modules\.pnpm\[email protected]_a51533014e25e427fd41fc3dc0737403\node_modules\vite-plugin-tauri\bin\vite-tauri.js
    Did you mean to import @[email protected]/node_modules/@tauri-apps/cli/main.js?
        at new NodeError (internal/errors.js:322:7)
        at finalizeResolution (internal/modules/esm/resolve.js:308:11)
        at moduleResolve (internal/modules/esm/resolve.js:731:10)
        at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:842:11)
        at Loader.resolve (internal/modules/esm/loader.js:89:40)
        at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
        at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:76:40)
        at link (internal/modules/esm/module_job.js:75:36) {
      code: 'ERR_MODULE_NOT_FOUND'
    }
     ELIFECYCLE  Command failed with exit code 1.
    

    I am using: Deps: "@tauri-apps/api": "^1.0.0-rc.1", DevDeps: "vite-plugin-tauri": "^1.1.0", "@tauri-apps/cli": "^1.0.0-rc.5",

    bug 
    opened by The-Mr-L 8
  • Error when building release

    Error when building release

    Hi, I think you have to remove the '"./" +' from the dist path resolve. thank you

    15:46:24 PM [vite-plugin-tauri] tauri-cli_windows.exe download Completed. Error: Unable to find your web assets, did you forget to build your web app? Your distDir is set to ""../C:\Users\xxxx\projects\app\project\dist""

    edit well I tried removing it and now it builds but the ui is just blank not rendering. I am on windows 10. I tried debug build and same thing happens and no error messages in the ui or backend

    bug 
    opened by The-Mr-L 6
  • [postcss] ENOENT: no such file or directory, stat './index.html'

    [postcss] ENOENT: no such file or directory, stat './index.html'

    Hi! First, of thank you for this handy plugin it really cleans up my package.json and shrinks my deps. But I am having an issue getting to working on Linux. Now on windows, it works fine. But I am unable to get it working on Linux + MacOSX. My repo for this project is located here https://github.com/Ortygia/Orpheus I am sorry to say this is all I have to help you on figuring out the issues

    ⋊> ~/p/Orpheus on master ◦ npm run dev                                                                                                                                                                                         03:03:52
    
    > [email protected] dev
    > vite-tauri dev
    
    [vite-plugin-tauri]  Starting Vite dev server...
    [vite-plugin-tauri]  Vite dev server started.
    [vite-plugin-tauri]  Starting Tauri...
            Info Watching /home/rylee/projects/Orpheus/src-tauri for changes...
        Finished dev [unoptimized + debuginfo] target(s) in 0.10s
    
    🌼 daisyUI components 2.27.0  https://github.com/saadeghi/daisyui
      ✔︎ Including:  base, components, themes[29], utilities
    
    
    🌼 daisyUI components 2.27.0  https://github.com/saadeghi/daisyui
      ✔︎ Including:  base, components, themes[29], utilities
    
    3:03:55 AM [vite] Internal server error: [postcss] ENOENT: no such file or directory, stat './index.html'
      Plugin: vite:css
      File: /home/rylee/projects/Orpheus/src/index.css
          at Object.statSync (node:fs:1596:3)
          at resolveChangedFiles (/home/rylee/projects/Orpheus/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:117:36)
          at resolvedChangedContent (/home/rylee/projects/Orpheus/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:101:29)
          at /home/rylee/projects/Orpheus/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:163:44
          at /home/rylee/projects/Orpheus/node_modules/tailwindcss/lib/processTailwindFeatures.js:46:11
          at plugins (/home/rylee/projects/Orpheus/node_modules/tailwindcss/lib/index.js:33:63)
          at LazyResult.runOnRoot (/home/rylee/projects/Orpheus/node_modules/postcss/lib/lazy-result.js:339:16)
          at LazyResult.runAsync (/home/rylee/projects/Orpheus/node_modules/postcss/lib/lazy-result.js:393:26)
          at LazyResult.async (/home/rylee/projects/Orpheus/node_modules/postcss/lib/lazy-result.js:221:30)
          at LazyResult.then (/home/rylee/projects/Orpheus/node_modules/postcss/lib/lazy-result.js:206:17)
    [postcss] ENOENT: no such file or directory, stat './index.html'
    3:03:56 AM [vite] Internal server error: [postcss] ENOENT: no such file or directory, stat './index.html'
      Plugin: vite:css
      File: /home/rylee/projects/Orpheus/src/index.css
          at Object.statSync (node:fs:1596:3)
          at resolveChangedFiles (/home/rylee/projects/Orpheus/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:117:36)
          at resolvedChangedContent (/home/rylee/projects/Orpheus/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:101:29)
          at /home/rylee/projects/Orpheus/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:163:44
          at /home/rylee/projects/Orpheus/node_modules/tailwindcss/lib/processTailwindFeatures.js:46:11
          at plugins (/home/rylee/projects/Orpheus/node_modules/tailwindcss/lib/index.js:33:63)
          at LazyResult.runOnRoot (/home/rylee/projects/Orpheus/node_modules/postcss/lib/lazy-result.js:339:16)
          at LazyResult.runAsync (/home/rylee/projects/Orpheus/node_modules/postcss/lib/lazy-result.js:393:26)
          at LazyResult.async (/home/rylee/projects/Orpheus/node_modules/postcss/lib/lazy-result.js:221:30)
          at LazyResult.then (/home/rylee/projects/Orpheus/node_modules/postcss/lib/lazy-result.js:206:17)
    
    opened by 112RG 4
  • Evolve into Vite plugin

    Evolve into Vite plugin

    Ironically this doesn't seem to be a vite plugin, would be nice to turn it into one

    For reference, an Electron vite plugin I made: https://github.com/probablykasper/vite-plugin-electron-x (though it's probably a lot more complex than what a tauri plugin would need to be)

    opened by probablykasper 3
  • --target flag appears to not be working

    --target flag appears to not be working

    running npm run vite-tauri build --target x86_64-apple-darwin always yields an error

    npm run vite-tauri build --target x86_64-apple-darwin
    
    > [email protected] vite-tauri /path/to/project
    > vite-tauri "build" "x86_64-apple-darwin"
    
    [vite-plugin-tauri]  Building Vite project...
    vite v2.8.4 building for production...
    ✓ 98 modules transformed.
    
    dist/index.html                  0.48 KiB
    dist/assets/index.04504daf.js    8.07 KiB / gzip: 3.42 KiB
    dist/assets/index.d260c74e.css   320.40 KiB / gzip: 41.45 KiB
    dist/assets/vendor.ce5b3565.js   340.00 KiB / gzip: 88.89 KiB
    [vite-plugin-tauri]  Vite build finished.
    [vite-plugin-tauri]  Building Tauri app...
    error: Found argument 'x86_64-apple-darwin' which wasn't expected, or isn't valid in this context
    
    USAGE:
        cargo build --features <FEATURES>...
    
    For more information try --help
    [vite-plugin-tauri]  Error: failed to build app: Result of `cargo build` operation was unsuccessful: exit status: 1
    

    The corresponding command using the tauri cli works just fine:

    tauri build --target x86_64-apple-darwin
    

    Do flags need to be escaped somehow?

    opened by andr-ec 3
  • App blank when using Tauri 1.0.2

    App blank when using Tauri 1.0.2

    I'm using this plugin in https://github.com/Uninen/tauri-vue-template but for some reason it doesn't play well with the latest Tauri. Not sure where the problem actually is, but both Tauri and the Vue front both run fine, they just doesn't boot together when running vite-tauri dev; all I get is a blank screen.

    I'm using the latest version of vite-plugin-tauri but also teted with two older versions, both of which don't work either w/ the latest Tauri.

    opened by Uninen 1
  • HMR not reloading on wsl2 docker environment

    HMR not reloading on wsl2 docker environment

    Vite HMR works on browser by setting up vite.config.js

    export default defineConfig({
      server: {
        hmr: {
          host: '0.0.0.0'
        }
      }
    }
    

    but when I use yarn vite-tauri dev app works good but HMR does not hot reload tauri web view

    bug 
    opened by moracabanas 1
Releases(v3.0.2)
Owner
Amr Bashir
Coding for fun.
Amr Bashir
Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native Visit our website at vue-native.io or read the official documentation here. Build native mobile apps using Vue Vue Native is a framework to

GeekyAnts 8.4k Jan 6, 2023
Integrate Vite and Electron

vite-plugin-electron Integrate Vite and Electron Example ?? vite-plugin-electron-quick-start Usage vite.config.ts import electron from 'vite-plugin-el

null 217 Jan 2, 2023
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.7k Jan 4, 2023
A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

Azure Static Web App Template with Node.js API This is a template repository for creating Azure Static Web Apps that comes pre-configured with: Vue.js

Marc Duiker 6 Jun 25, 2022
Build performant, native and cross-platform desktop applications with native Vue + powerful CSS like styling.🚀

Vue NodeGui Build performant, native and cross-platform desktop applications with Vue. ?? Vue NodeGUI is powered by Vue ?? and Qt5 ?? which makes it C

NodeGui 765 Dec 30, 2022
Vue 3 + Vite + SSR template based on Vite Plugin SSR and inspired by Vitesse

Vite Vue SSR Starter Vue 3 + Vite + SSR template based on Vite Plugin SSR and inspired by Vitesse Features ⚡️ Vue 3, Vite 2, TypeScript ?? Domain-Driv

Oleg Koval 10 Aug 2, 2022
🖼 Image Presets for Vite.js apps

vite-plugin-image-presets Image Presets for Vite.js apps This Vite plugin allows you to define presets for image processing using Sharp, allowing you

Máximo Mussini 188 Dec 29, 2022
Replace files during Vite build - handy when replacing strings is not enough

vite-plugin-replace-files Replace files during Vite build - handy when replacing strings is not enough. Install Install with your favorite package man

Kamil Banach 7 Sep 21, 2022
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

Headless UI A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. Packages Name Version D

Tailwind Labs 18.4k Jan 4, 2023
⚡️ Integrate Nuxt with Twind, The smallest, fastest, most feature complete tailwind-in-js solution in existence!

Nuxt Twind Module Integrate Nuxt with Twind, The smallest, fastest, most feature complete tailwind-in-js solution in existence! Warning ?? This module

pooya parsa 38 Oct 18, 2022
Some compile-time magic for your Vite project

?? You can help the author become a full-time open-source maintainer by sponsoring him on GitHub. vite-plugin-compile-time Use this plugin to generate

EGOIST 90 Dec 15, 2022
Minimal setup for a WebXR project using Vite, Babylon.js, TypeScript, and Vue

WebXR-Vite-Babylon-Simple Minimal setup for WebXR development using: vite typescript vue 3 babylonjs 5 (ES6) Intentionally made minimal changes from t

Josh Sanderson 6 Nov 13, 2022
A Marko plugin for Vite

@marko/vite A Marko plugin for Vite. Installation npm install @marko/vite Example config import { defineConfig } from "vite"; import marko from "@mark

Marko 49 Nov 26, 2022
🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin

vue3-element-admin ?? 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统 简介 vue3-element-admin 是一个后台前端解决方案,它基于 vue3 和 element-plu

雪月欧巴 84 Nov 28, 2022
Vite template with TypeScript, Chakra UI, Eslint Airbnb, Prettier

Vite + Typescript + ChakraUI = ❤️ This is a vite template that combines several technologies: Vite React TypeScript ChakraUI Eslint with eslint-config

Lorenzo Rapetti 3 Mar 26, 2022
⏳ vue3 + electron + ts + vite = mini template

v3-electron ?? Electron16 + Vue3 + Vite2 运行项目 # enter the project directory cd v3-electron # install dependency yarn # develop yarn dev # build exe

UNPany 8 Nov 11, 2022
Using Cypress with Vite, React, TypeScript, MSW and react-query

Vie + Cypress + MSW + react-query Demo Example of using Cypress with Vite, MSW and react-query. Uses the appReady pattern to signal to Cypress when th

Rob Caldecott 9 Jul 16, 2022
Fastify boilerplate with Vite & Vitest

Fastify boilerplate with Vite & Vitest Enhance your Fastify DX with the power of Vite & Vitest. Features ⚡ All the power of Vite (Next Generation Fron

Emmanuel Salomon 31 Dec 13, 2022
vite+vue3.2+setup+elementPlus+eslint+js+stylelint

前期准备工作,npm包和vscode配置 !!!很重要,关乎整个Vue3开发阶段的代码提示 Volar使用 使用Vue3开发需要禁用vscode插件Vetur 然后安装 Volar(Vue Language Features),这样Vue3代码提示即使是使用js开发也非常友好 如果volar没有任何

null 2 Feb 8, 2022