Having Trouble Loading Vue Devtools in Vue Electron Builder

Question

Having Trouble Loading Vue Devtools in Vue Electron Builder

I'm encountering an issue with loading Vue Devtools in my Electron application integrated with Vue. This is my first time working with this combination, and I suspect there might be a dependency problem causing the Devtools not to load within the Electron app window.

Although I've checked out this Github issue, I have newer versions of Electron and vue-cli-plugin-electron installed with the latest code updates mentioned.

I also attempted the following snippet (sourced from here):

win.loadURL(process.env.WEBPACK_DEV_SERVER_URL).then(() => {
  if (!process.env.IS_TEST) {
    setTimeout(() => win.webContents.openDevTools(), 5555)
  }
})

Unfortunately, using that code snippet resulted in breaking everything.

One more thing I tried was running vue invoke electron-builder to regenerate the configuration, as suggested in the documentation.

However, the issue persists. Could someone please review my setup and point out any obvious mistakes?

This excerpt shows part of my package.json:

 [JSON content here]

And below is my background.js file:

 [JavaScript content here]

javascript vue.js electron

Answer 1

Answer №1

The official release of Vue DevTools is not yet compatible with Vue 3.

To work around this issue, you will need to install the Vue DevTools Beta instead.

Make the following change:

await installExtension({
  id: 'ljjemllljcmogpfapbkkighbhhppjdbg',
  electron: '>=1.2.1'
})

For more details, check out the discussion here.

UPDATE

You can now simply use the VUEJS3_DEVTOOLS constant like this:

await installExtension(VUEJS3_DEVTOOLS);

Answer 2

The official release of Vue DevTools is not yet compatible with Vue 3.

To work around this issue, you will need to install the Vue DevTools Beta instead.

Make the following change:

await installExtension({
  id: 'ljjemllljcmogpfapbkkighbhhppjdbg',
  electron: '>=1.2.1'
})

For more details, check out the discussion here.

UPDATE

You can now simply use the VUEJS3_DEVTOOLS constant like this:

await installExtension(VUEJS3_DEVTOOLS);

Answer 3

Answer №2

Instead of using timeouts, it's recommended to wait for the dom-ready event. This approach is likely to ensure everything works smoothly.

Check out this related fix for Redux devtools.

const {
    app,
    BrowserWindow,
} = require("electron");
const {
    default: installExtension,
    VUEJS_DEVTOOLS
} = require("electron-devtools-installer");
const isDev = process.env.NODE_ENV === "development";

// Keep a global reference of the window object to prevent automatic closure
let win;

async function createWindow() {

    // Create the browser window
    win = new BrowserWindow({
        width: 800,
        height: 600,
        title: "MyAppTitle",
        webPreferences: {
            devTools: isDev
        }
    });

    // Load the app
    win.loadURL("index.html");

    // Perform actions only in development mode
    if (isDev) {

        // Install Vue.js devtools and open DevTools when DOM is ready
        win.webContents.once("dom-ready", async () => {
            await installExtension([VUEJS_DEVTOOLS])
                .then((name) => console.log(`Added Extension:  ${name}`))
                .catch((err) => console.log("An error occurred: ", err))
                .finally(() => {
                    win.webContents.openDevTools();
                });
        });
    }

    // Handle window closed event
    win.on("closed", () => {
        // Dereference the window object to prevent memory leaks
        win = null;
    });
}

// Called when Electron has finished initialization and can create browser windows
app.on("ready", createWindow);

// Quit when all windows are closed
app.on("window-all-closed", () => {
    // On macOS, keep the application active until explicitly quit
    if (process.platform !== "darwin") {
        app.quit();
    }
});

Answer 4

Instead of using timeouts, it's recommended to wait for the dom-ready event. This approach is likely to ensure everything works smoothly.

Check out this related fix for Redux devtools.

const {
    app,
    BrowserWindow,
} = require("electron");
const {
    default: installExtension,
    VUEJS_DEVTOOLS
} = require("electron-devtools-installer");
const isDev = process.env.NODE_ENV === "development";

// Keep a global reference of the window object to prevent automatic closure
let win;

async function createWindow() {

    // Create the browser window
    win = new BrowserWindow({
        width: 800,
        height: 600,
        title: "MyAppTitle",
        webPreferences: {
            devTools: isDev
        }
    });

    // Load the app
    win.loadURL("index.html");

    // Perform actions only in development mode
    if (isDev) {

        // Install Vue.js devtools and open DevTools when DOM is ready
        win.webContents.once("dom-ready", async () => {
            await installExtension([VUEJS_DEVTOOLS])
                .then((name) => console.log(`Added Extension:  ${name}`))
                .catch((err) => console.log("An error occurred: ", err))
                .finally(() => {
                    win.webContents.openDevTools();
                });
        });
    }

    // Handle window closed event
    win.on("closed", () => {
        // Dereference the window object to prevent memory leaks
        win = null;
    });
}

// Called when Electron has finished initialization and can create browser windows
app.on("ready", createWindow);

// Quit when all windows are closed
app.on("window-all-closed", () => {
    // On macOS, keep the application active until explicitly quit
    if (process.platform !== "darwin") {
        app.quit();
    }
});

Having Trouble Loading Vue Devtools in Vue Electron Builder

Answer №1

UPDATE

Answer №2

Similar questions

What is the best method for capturing the line delimiter character(s) in a manner that is not dependent on the platform being

What factors could potentially cause Internet Explorer to fail in processing conditional comments effectively?

Vue parent component not receiving events properly

Is the length of a complex match in Angular JS ng-if and ng-repeat greater than a specified value?

Sorting WordPress entries by nearby locations

Using AngularJS to Nest ng-view within ng-repeat

JSON data not displaying correctly in bootstrap table

What could be the reason for the container div's height not being properly refreshed?

Is there a way to modify or add to the response object's methods in Express and Node.js?

bulk purchase discount with HTML/JavaScript/PHP

Navigate through intricate JSON structure

The Catcomplete widget malfunctioned after the update of jQuery UI from version 1.8 to 1.12

Displaying an image within a textarea using JS and CSS

The implementation of a custom event for jQuery rows is not functioning as expected

The Material UI component successfully loads the options data list from the server response, however, it fails to return the selected value when an option

What is preventing me from installing socket.io?

sinon: Techniques for stubbing an entire class as opposed to singular methods

What could be causing the bootstrap 4 col-md-3 block to shrink when using position fixed?

Encountering an "Unspecified Reference Error" while attempting to retrieve data from an API in your

Changing the value of a variable after iterating through an array in JavaScript