Tauri + Vue + Vite template
Simple and opinionated project template for Tauri and Vue 3.
- Vue 3
- Vite
- Hot Module Replacement
- AutoImport plugin
- TypeScript
- Eslint, Prettier
- Tailwind CSS w/ PostCSS
- Vitest for unit tests
- Github Actions
Setting Up
- Install Tauri Prerequisites
- Clone and install frontend dependencies (this template uses
pnpm
by default but you can use whatever package manager you like):
pnpm i
Usage
The app is has two parts (see Tauri Process Model docs); the Core Process (backend
, or main process in Electron terminology) and the WebView process (frontend
, or renderer in Electron terminology).
Frontend / WebView (Node, PnPM)
Running Tauri + Vite Development Server
Both backend and frontend start simultaneously:
pnpm dev
Testing
pnpm test
Backend / Core (Rust, Cargo)
Backend code lives in src-tauri/
. (Following commands are to be run in 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
- You can get Rust to output a backtrace by running with
RUST_BACKTRACE=1
environment variable
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/
) - Run
pnpm check
to updateCargo.lock
- Tag the commit you want to release with
vX.Y.Z
- Github workflow will automatically build a new draft release for this version. Edit the release notes and publish when ready 🎉
Elsewhere
- Follow @uninen on Twitter
- Read my continuously updating learnings from Vite / 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.