CODEWITHSUNDEEP
vue.jsgoogle-chrome-extensionelectrongoogle-chrome-devtoolses6-modules
FK-
FK-

Reputation: 1572

Loading Vue devtools in electron in development mode

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.

Upvotes: 0

Views: 1792

Answers (2)

bendytree
bendytree

Reputation: 13589

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));
});

Upvotes: 0

FK-
FK-

Reputation: 1572

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

Upvotes: 2

Related Questions