Loading preload script in Electron and Vue

Question

I am using Vue CLI 3 and vue-cli-plugin-electron-builder to package my Vue Electron app and I am not able to get my preload.js script for electron working.

Answer 1

Add the following lines into vue.config.js file and if the file does not exist create one in the root folder of your project

module.exports = {
 //...
 pluginOptions: {
  electronBuilder: {
    preload: 'src/preload.js',
    // Or, for multiple preload files:
    preload: { preload: 'src/preload.js', otherPreload: 'src/preload2.js' }
  }
 }
 //...
}

For doc#preload-files

Answer 2

The solution was more simple than expected. Imports work in window.onload event.

window.onload = () => {
  const { dialog } = require("electron").remote;

  window.electron = {};
  window.electron.dialog = dialog; // now set properly
};