feat(desktop): add electron-devtools-installer for Vue.js debugging s…

…upport

apps/desktop/package.json

@@ -56,6 +56,7 @@
     "drizzle-kit": "^0.28.1",
     "electron": "^33.2.0",
     "electron-builder": "^26.0.0-alpha.6",
+    "electron-devtools-installer": "^3.2.1",
     "electron-vite": "^2.3.0",
     "jsdom": "^25.0.1",
     "postcss": "^8.4.48",

apps/desktop/src/main/index.ts

@@ -2,6 +2,7 @@ import { join } from 'node:path'
 import { electronApp, is, optimizer } from '@electron-toolkit/utils'
 import { eq } from 'drizzle-orm'
 import { app, BrowserWindow, ipcMain, shell } from 'electron'
+import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
 import icon from '../../resources/icon.png?asset'
 import { db, execute, runMigrate } from '../database/db.main'
 import { type SelectSettings, settings } from '../database/schemas/settings'
@@ -48,8 +49,13 @@ async function createWindow() {
 
   mainWindow.on('ready-to-show', () => {
     mainWindow.show()
+  })
+
+  mainWindow.webContents.on('did-frame-finish-load', async () => {
     if (is.dev) {
-      mainWindow.webContents.openDevTools()
+      installExtension(VUEJS_DEVTOOLS)
+        .then(() => mainWindow.webContents.openDevTools())
+        .catch(err => console.error('An error occurred: ', err))
     }
   })