How do I install vue-devtools?

[Imaginativeone]

I'm having a difficult time connecting my Electron apps to vue-devtools. Does anyone have a guide?

[cawa-93]

vite-electron-builder/packages/main/src/index.ts

Lines 43 to 56 in 0ae2c72

	/**
	* Install Vue.js or any other extension in development mode only.
	* Note: You must install `electron-devtools-installer` manually
	*/
	// if (import.meta.env.DEV) {
	// app.whenReady()
	// .then(() => import('electron-devtools-installer'))
	// .then(({default: installExtension, VUEJS3_DEVTOOLS}) => installExtension(VUEJS3_DEVTOOLS, {
	// loadExtensionOptions: {
	// allowFileAccess: true,
	// },
	// }))
	// .catch(e => console.error('Failed install extension:', e));
	// }

[TheAutomaTom]

@cawa-93 I feel like I'm doing exactly what's intended...

if (import.meta.env.DEV) {
  app.whenReady()
    .then(() => import("electron-devtools-installer"))
    .then(({default: installExtension, VUEJS3_DEVTOOLS}) => installExtension(VUEJS3_DEVTOOLS, {
      loadExtensionOptions: {
        allowFileAccess: true,
      },      
    }))
    .catch(e => console.error(`Failed install extension: ${e}`));
  }

I tried adding electron-devtools-installer to both devDependencies, then dependencies, then both.

Executed npm i then npm run build before each try. Executing by F5. Confirmed this is running in Dev mode with a console.log

Error seen in debug console: Failed install extension: TypeError: installExtension is not a function

No Vue tools are seen in the devTools.

Any advice would be appreciated. I'd really like to get rolling with your awesome template! I would hope I can use Vue Dev tools along with Pinia state management support.

[cawa-93]

Should be fixed by 084fb9f

[TheAutomaTom]

Latest version is failing to install dev tools:

An error occurred:  Error: Invalid header: Does not start with Cr24
    at crxToZip (z:\MyApp\node_modules\unzip-crx-3\dist\index.js:32:15)
    at z:\MyApp\node_modules\unzip-crx-3\dist\index.js:69:32
    at callHanler (z:\MyApp\node_modules\yaku\lib\yaku.js:719:16)
    at tryCatcher (z:\MyApp\node_modules\yaku\lib\yaku.js:436:32)
    at z:\MyApp\node_modules\yaku\lib\yaku.js:575:38
    at flush (z:\MyApp\node_modules\yaku\lib\yaku.js:478:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11) 
      {stack: 'Error: Invalid header: Does not start with Cr…ons (node:internal/process/task_queues:77:11)', 
      message: 'Invalid header: Does not start with Cr24'}

Seems like it's the package's probelm, using "electron-devtools-installer": "^3.2.0"

I'm surprised we don't have a workaround outlined in the code. Do you think adding something like this would be helpful? I found this code on here somewhere: I'm sorry I forgot who wrote it, originally!

  // This is the workaround for `electron-devtools-installer`
  // To get your extension-id:
  // 1. In a chrome browser, go to url `chrome://extensions/`
  // 2. Select dev tools extension
  // 3. Look in address bar.
  // 4. Find that folder here:
  //      `C:\Users\YOUR_NAME_HERE\AppData\Local\Google\Chrome\User Data\Default\Extensions`
  // 5. The version's folder name for the path `extensionVersion` seen below.
  if (import.meta.env.DEV) {
    const { app, session } = require("electron");
    const path = require("path");
    const os = require("os");
    const extensionId = "\\nhdogjmejiglipccpnnnanhbledajbpd";
    const basePath = "AppData\\Local\\Google\\Chrome\\User Data\\Default\\Extensions";
    const extensionVersion = "\\6.5.0_0";
    const vueDevToolsPath = path.join( os.homedir(), basePath, extensionId, extensionVersion );
    app.whenReady().then(async () => {
      await session.defaultSession.loadExtension(vueDevToolsPath);
    })
    .catch(e => console.error("Failed to install dev tools:", e));
  }