[Vuejs]-Electron ipcRenderer from Vue.js Single File Component

— Update —

Use a vuex store or something like.

— Original —

I seem to have found a way to do it. Maybe there is still a better way?

<template>
  <v-container fluid>
    <v-btn @click="do_action()">{{title}}</v-btn>
    <v-textarea v-model="response_message">
    </v-textarea>
  </v-container>
</template>

<script>
  const { ipcRenderer } = require('electron')

  var catcher = 0;
  function setMessage(msg) {
    this.response_message = msg
  }

  export default {
    props: ['title'],
    data: function(){
      return {
        response_message: "Original Message"
      }
    },
    methods: {
      do_action: function() {
        catcher = setMessage.bind(this)
        ipcRenderer.send('cmnd_foo')
      }
    },
  }

  ipcRenderer.on('cmnd_foo-reply', (event, a_new_message) => {
    catcher(a_new_message);
  })
</script>

You can apply the solution described on this post
How to import ipcRenderer in vue.js ? __dirname is not defined

Just make sure you configure preload.js on vue.config.js:

// vue.config.js - project root
module.exports = {
  pluginOptions: {
    electronBuilder: {
       preload: 'src/preload.js'  //make sure you have this line added
    }
  }
}

Another solution can be found here https://medium.com/swlh/how-to-safely-set-up-an-electron-app-with-vue-and-webpack-556fb491b83 and it use __static to refer to preload file instead of configure it on vue.config.js. To make it work you can disable preload es-lint warning inside of BrowserWindow constructor:

// eslint-disable-next-line no-undef
preload: path.resolve(__static, 'preload.js')

And make sure you added preload.js file on /public folder

Just add remote at the end:

const { ipcRenderer } = require('electron').remote