Use vue-devtools in tauri

Tauri claims itself as an un-opinionated, agnostic desktop application framework that does not depend on a specific front-end framework.

Vue is very popular among developers for its simplicity and ease of use.

Vue Devtools is a small tool that displays the details of a vue program in the browser console.

Today we combine them and demonstrate how to configure Vue Devtools in a new tauri project.

Prerequisites

Creating a tauri project, remember to choose vue as the front end framework. 。

1cargo install create-tauri-app
2cargo create-tauri-app --rc

1pnpm create tauri-app --rc

https://v2.tauri.app/start/create-project/

Install Vue Devtools

windows

1$env:ELECTRON_CUSTOM_DIR=""; npm install -g @vue/devtools

linux or macos

1export ELECTRON_CUSTOM_DIR=""
2npm install -g @vue/devtools

Use Vue Devtools

Start Vue Devtools

1vue-devtools

or add it to package.json:

1  "scripts": {
2    ...
3    "vue:dev-tools": "vue-devtools",
4    ...
5  }

Introduce Vue Devtools in your index.html

 1<!doctype html>
 2<html lang="en">
 3  <head>
 4    <meta charset="UTF-8" />
 5    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7    <title>Tauri + Vue + Typescript App</title>
 8  </head>
 9
10  <body>
11    <div id="app"></div>
12    <script type="module" src="/src/main.ts"></script>
13    <script src="http://localhost:8098"></script> <!-- add this line -->
14  </body>
15</html>

Check

At this point, you might be able to use vue-devtools in tauri.