ADD: Vue devtools in development mode

src/main/index.ts

@@ -3,11 +3,14 @@ import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 import nanoSerialApi from './nanoSerialApi'
+import installExtension from 'electron-devtools-installer'
 
 const zoomFactor = 1
 const windowWidth = 1111
 const windowHeight = 666
 
+const VUE_DEVTOOLS = 'nhdogjmejiglipccpnnnanhbledajbpd'
+
 const appMenu = {
   device: {
     label: 'Device',
@@ -88,6 +91,12 @@ app.whenReady().then(() => {
   // Set app user model id for windows
   electronApp.setAppUserModelId('ZERO/ONE')
 
+  if (is.dev) {
+    installExtension(VUE_DEVTOOLS)
+      .then((name) => console.log(`Added Extension:  ${name}`))
+      .catch((err) => console.log('An error occurred: ', err))
+  }
+
   // Default open or close DevTools by F12 in development
   // and ignore CommandOrControl + R in production.
   // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils