Loading Vue devtools in electron in development mode

Question

I was looking for a way to add Vue Devtools to the electron app I was working on. I tried a couple of methods that seemed to be outdated and finally succeded using this package:

electron-devtools-installer which I installed as a DEV dependency.

with this code:

import { app } from 'electron'
import installExtension from 'electron-devtools-installer';
const VUEJS3_DEVTOOLS = 'nhdogjmejiglipccpnnnanhbledajbpd';

...
app.whenReady().then(() => {
  installExtension(VUEJS3_DEVTOOLS)
    .then((name) => console.log(`Added Extension:  ${name}`))
    .catch((err) => console.log('An error occurred: ', err));
});

but since this was a DEV dependency, the app fails to load due to the missing package in production.

I was wondering if there is a way to dynamicly load the package/extension only if not in production.

FK- · Accepted Answer · 2022-09-26 14:38:46Z

2

It took me many attempts to figure this out since this isn't directly documented anywhere and I lack the experience of loading ES6 modules to think of trying module.default.default.

This is the code that ended up working without issues in both development and production cases:

app.whenReady().then(() => {
  if (process.env.DEBUGGING) // replace with whatever you use to check for dev env
    import('electron-devtools-installer')
      .then(mymodule => {
        const installExtension = mymodule.default.default; // Default export
        installExtension(mymodule.default.VUEJS_DEVTOOLS) // replace param with the ext ID of your choice
          .then((name) => console.log(`Added Extension:  ${name}`))
          .catch((err) => console.log('An error occurred: ', err));
      }).catch((err) => console.log('An error occurred: ', err));

}).catch((err) => console.log('An error occurred: ', err));

There might be a more elegant way to do this but this is all I needed. I am open to hear improvements on this.

Note: replace mymodule.default.VUEJS_DEVTOOLS with any other valid Chrome extension ID. The package has some popular ones built-in: Electron DevTools Installer - GitHub

answered Sep 26, 2022 at 14:38

FK-

1,5821 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Estus Flask Over a year ago

This is specific to electron-devtools-installer. Usually a package should provide ESM entry point but it's build as CJS so * import is mymodule.default when used without additional things that could transform modules (Babel, etc)

bendytree · Accepted Answer · 2024-06-06 15:58:08Z

0

Electron recommends the third party electron-devtools-installer. The Usage section gives a simple example. Add this to your main script then restart everything:

const { default: installExtension, VUEJS_DEVTOOLS } = require('electron-devtools-installer');

app.whenReady().then(() => {
  installExtension(VUEJS_DEVTOOLS)
    .then((name) => console.log(`Added Extension:  ${name}`))
    .catch((err) => console.log('An error occurred: ', err));
});

answered Jun 6, 2024 at 15:58

bendytree

13.7k12 gold badges81 silver badges100 bronze badges

Collectives™ on Stack Overflow

Loading Vue devtools in electron in development mode

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related