ipcMain / ipcRenderer with Quasar/Electron

Epo

Hi,

i have wraped my quasar app with electron and i want to use the ipcmain and ipcrenderer process.

now ich have my project folder where i run: quasar dev
and my electron folder within my project folder where i also run: quasar dev

in myproject/electron/src/main.js file i do this:
const {ipcMain} = require(‘electron’)

and in one of my components i want to us the ipcRenderer like this.
const {ipcRenderer} = require(‘electron’)

But this end´s in an error—>

This dependency was not found:

electron in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/modules/time/components/UserAction.vue

To install it, you can run: npm install --save electron

Any idea??

Epo

Main Problem is: How can i import electron (in particular ipcRenderer) into one of my vuejs components???

npm install --save-dev electron in my main project folder seems to be ignored due to some settings?

I saw there is a devDependency like “quasar-electron-app”:“file:electron” but dont know how to use this?

canaillou

Same problem here. I was able to install electron by specifying the version, with the command below:

npm install --save electron@1.7.9

But later on the require statement, the module fails to load (ENOENT on /path.txt). So I’m not sure about the way to use it…

canaillou

Got it from this post ! Come back with the provided quasar-electron-app and add the following line to the build/webpack.base.conf.js of your root directory

target: 'electron-renderer'

talhaHavadar

Hi @Epo, I know it is too late but you may consider using electron’s preload js functionality. I had the same issue while trying to use ipcRenderer on vue side.

in your electron source (src-electron) there is an option for BrowserWindow named ‘webPreferences’ and it has preload option.

// in your main electron process.
let win = main.win = new electron.BrowserWindow({
    webPreferences: {
      preload: require("path").join(__statics, "preload.js")
    }
    // eslint-disable-next-line prettier/prettier
  });

// in your preload.js which is located under src/statics
window.ipcRenderer = require("electron").ipcRenderer;

When you apply the changes above you will be able to access ipcRenderer from vue side.