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

Create a parent dropdown class that contains two separate bootstrap dropdowns nested within it

The selectors in NgRx store are failing to retrieve data from the main global store

What is the best way to switch from http to https in a React application?

Express server experiencing a conflict with authentication sessions

When using Asp.Net TextBox, the focus is lost after inputting the first character

When using `setState()`, ensure that you are updating a component that is already mounted or in the process of mounting. If you receive this error, it

Aligning the 'container-fluid' slideshow and video player

Expand the boundaries of the MUI Select to encompass a different element

a function that is not returning a boolean value, but rather returning

How to add suspense and implement lazy loading for a modal using Material-UI

What steps should I take to incorporate a timer into my bot similar to the timer used by other giveaway bots

Using this PHP function

What is the process for updating the data of a Single File Component using its own method?

My requests are failing because jQuery AJAX does not send hashtag symbols

Modify the bootstrap form dynamically in response to the user's input. Update the form layout instantly as the user types, with no need for clicking any buttons

Leveraging API JSON information in conditional return statements with React

Tips for retrieving information from a dynamically created form using VUE?

Using React Native's stylesheet to apply multiple values in a CSS statement

What is the best way to resize an element such as an image?

Implementing Event Handlers for Multiple Textareas Using Jquery on a Webpage