Question: How this works on electron-vue ?

[Tonysmark]

function createWindow() {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    width: 1400,
    height: 900,
    minWidth: 768,
    webPreferences: {
      nodeIntegration: true
    },
    frame: false,
    backgroundColor: "#00000000"
  });

  mainWindow.loadURL(winURL);

  mainWindow.on("closed", () => {
    mainWindow = null;
  });
  SetWindowCompositionAttribute(
    mainWindow.getNativeWindowHandle(),
    ACCENT_STATE.ACCENT_ENABLE_ACRYLICBLURBEHIND,
    0x10000000
  );
}

this works on electron but electron-vue is another story.

[sylveon]

It's possible that electron-vue's default page is white. You'd need to apply CSS to make it transparent.

[Tonysmark]

No.....I've tried many times but none of them works exactly as this package. So......I'm getting little confuse right now.

[I-Want-ToBelieve]

This package works fine in electron-vue.

However, I have encountered a compilation problem.
Do you have a similar problem?
Maybe this can help you: onmyway133/blog#69

And the version of python can't be 3.x, which will also cause the compilation to fail.

This is the command I made it compile and execute successfully.:

rm -rf node_modules
yarn upgrade electron@^4.1.1
yarn add electron-rebuild -D

[sylveon]

The fact that they had to break the ABI is pretty awful, I'll add a note about electron-rebuild later today.

[I-Want-ToBelieve]

This will reduce the difficulty for people to get started, good work.

[sylveon]

Ok so after some testing: I have Python 3.7 in my global PATH and Python 2.7 installed but not in my PATH and it did work. That is all documented on node-gyp's README or in the Microsoft node.js guidelines which I will also link in the README for convenience's sake.

Indeed without running electron-rebuild I ran into an ABI version mismatch, but a simple npx electron-rebuild also fixed that.