ipcMain / ipcRenderer with Quasar/Electron

  • 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??

  • 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?

  • 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…

  • 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'

  • 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.

Log in to reply