Create a Menu Bar App With Tauri

Let’s leverage the Rust framework

Menubar application with Tauri

The State of JS’s 2022 results motivated me to look closely at Tauri as an alternative to Electron. One of the main benefits of the framework is undoubtedly the size of the final app bundle.

The main obstacle that stopped me from creating/converting an app from Electron to Tauri was my lack of Rust knowledge. But looking at the list of apps in the awesome-tauri repo, I saw a couple of apps living in the menubar and finally decided to create something on my own.

Since I couldn’t find anything similar to a menubar module for Tauri, I want to share my experience in creating a simple menubar/tray app from scratch in this article. The JavaScript part of the code will not be touched, as we will add all the necessary code to the Rust files.

For those who want to take a look at the whole code right away, please check this repository.

1. Generating a New App

As Tauri’s quick-start documentation suggests, let’s take the npm create command and generate a new app:

$ npm create tauri-app

Enter the application’s name, choose any package manager, and the basic framework. I took pnpm and vue-ts.