My approach to making the require visible in <app></app> is as follows:
index.html:
<script>
var electron = require('electron')
</script>
<app></app>
<script src="bundle.js"></script>
App.vue:
const ipc = electron.ipcRenderer
console.log(ipc)
However, I encountered ESLint errors for using an un-used and un-defined variable. To address this, I opted for the following solution:
requires.js:
var electron = require('electron')
exports.electron = electron
index.html:
<script src="requires.js"></script>
</head>
<body>
<app></app>
<script src="bundle.js"></script>
This new implementation led to the error:
requires.js:3 Uncaught ReferenceError: exports is not definedWhat is the correct method to export and import the electron require?
Note: directly requiring electron in App.vue does not work. The proper location to require electron is within index.html
Full example: https://github.com/alexcheninfo/vue-electron-simple