Use Vue devtools with Tauri

If you're a Vue developer building your first Tauri app you may be wondering how you can use the Vue devtools with Tauri. Thankfully it's pretty easy to setup using Vue's standalone devtools.

Setting up

First install the devtools as a dev dependency.

npm install --save-dev @vue/devtools

Now you can launch the devtools.

npx vue-devtools

Now your frontend won't connect to the devtools automatically, so let's open our main.ts/main.js file. It's important to connect before creating your Vue app.

import { devtools } from "@vue/devtools";
import { createApp } from "vue";
// ...
 
if (process.env.NODE_ENV === "development") {
  devtools.connect();
}
 
createApp(...).mount("#app");

Now that we have that taken care of we can run our tauri app.

npm run tauri dev

Now you should be able to debug your components like you're used to! For more information you can look at the Vue devtools docs.