[Vuejs]-Loading Vue devtools in electron in development mode

by

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

👤FK-

Leave a comment