Tauri + Vue + Vite Template
Simple project template for Tauri and Vue 3.
Features
- Vue 3 / TypeScript frontend
- ESLint + Prettier configured
- Vue-devtools installed
- Tailwind CSS w/ PostCSS configured
- Simple and fast Vite config w/ HMR in development and optimizations for production builds
- Vitest for unit tests
- Github Actions for testing and building
- Debugging configuration set up for VS Code
Setting Up
- Install Tauri Prerequisites
- Clone and install dependencies (this template uses
pnpm
by default):
pnpm i
Usage
A Tauri app has at least two processes:
- the Core Process (
backend
, or main process in Electron terminology), and - the WebView process (
frontend
, or renderer in Electron)
🦢 Frontend (TS, PnPM)
Running Development Server
Both back- and frontend start with a single command:
pnpm dev
Testing
pnpm test
🦀 Backend (Rust, Cargo)
Backend code lives in src-tauri/
(Following commands are to be run from there.)
Finding Outdated Rust Dependencies
If you have cargo-outdated installed:
cargo outdated
Upgrading Rust Dependencies
If you have cargo-edit installed:
cargo upgrade
Debugging
- The
dev
command has by defaultRUST_BACKTRACE=1
set which makes Rust output full backtraces to the console. (Remove it from thepackage.json
command if you don't want it). - If you use VS Code, you can debug Rust code with the included
Debug Tauri
config.
Building and releasing
Building
The project has GitHub Actions set up which will automatically test and build your app with every push and PR. For building manually:
pnpm build
Releasing a new version
- Bump version number (In
package.json
, andsrc-tauri/tauri.conf.json
) - Run
pnpm check
to updateCargo.lock
- Tag the commit you want to release with
vX.Y.Z
- Edit the release notes and push (also tags!)
- Github workflow will automatically build a new draft release for this version. Publish when ready 🎉
Howto
titleBarStyle: 'hidden'
in Electron)
Custom title bar styles (like Tauri doesn't currently offer a method to hide the title bar without hiding all window chrome. There is, however, a fairly simple way to do it manually (with certain limitations; see Tauri issue #2663 for details).
- Add
cocoa
andobjc
crates to dependencies - Add
set_transparent_titlebar
andposition_traffic_lights
from this gist: https://gist.github.com/Uninen/5377381eb81bdcd71b9d1859e46e3e29 - Call
set_transparent_titlebar
andposition_traffic_lights
fromsetup
andon_window_event
(example in the gist starting line 114) on any window you want affected.
This implementation works but results in visible jerkyness of the traffic lights (on macOS) when the window is resized. (Alternatives discussed in detail in the issue #2663)
Elsewhere
- Follow @uninen on Twitter
- Read my continuously updating learnings around Tauri / Vue / TypeScript and other Web development topics from my Today I Learned site
Contributing
Contributions are welcome! Please follow the code of conduct when interacting with others.