Communication between preload and Vue

[Barrosy]

I am trying to replicate the Electron Default starter project, however, I would like to do this in Vue. I am quite new to the concepts of programming using Vue and Electron and wondered if anyone could help me out with the following:

Is it possible to render some sample information (e.g. the versions of dependencies as noted in the documentation of Electron such as Chrome, Node and Electron) from the preload script of Electron in a Vue component?

Is it possible to develop an interchange of information between Vue and Electron's preload process?

I am aware that for communication between the renderer and preload process in Electron's context I might need something called a contextBridge, however, I am not sure if I will be using the renderer script for achieving said goal in the first place.

Is there any documentation available for achieving said goal? I already checked the documentation available for Electron Builder and I don't believe I could find anything relevant to this question other then getting the preload.js to work.

I was able to print the versions correctly outisde of the Vue app's context within the index HTML page, however, my question remains as how to get this working with Vue (in a graceful manner if possible).

[Barrosy]

I got the answer to my question by researching deeper into the usage of contextBridge (as cited above).

I adjusted my preload.js so that it now implements logic for retreiving dependency information:

const { ipcRenderer, contextBridge } = require("electron")

let dependencies = {}

for (const dependency of ['chrome', 'node', 'electron']) {
    dependencies[`${dependency}-version`] = process.versions[dependency]
}

//Communication between renderer process and main process:
contextBridge.exposeInMainWorld("api", {
    greet: (message) => ipcRenderer.send("greet", message),
    getVersion: () => ipcRenderer.invoke("version"),
    getDependencies: async () => { return dependencies }
})

The most important line of code for achieving above mentioned goal is the getDependencies: async () => { return dependencies } which does all the work for me.

Then in my designated Vue component I would be able to access the dependency information by referring to the window interface, using dot notation to access the name I defined as apiKey of the exposeInMainWorld function provided by the contextBridge module.

For example purpose I added the logic to my HelloWorld.vue component such that my component implements this.dependencies = await window.api.getDependencies() in the created() lifecycle hook of Vue:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    We are using Node.js {{ nodeVersion }},
    Chromium {{ chromeVersion }},
    and Electron {{ electronVersion }}.
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      version: null,
      dependencies: null,
      nodeVersion: null,
      chromeVersion: null,
      electronVersion: null
    }
  },
  async created() {

    //How to send information to Electron Main process:
    window.api.greet("Hello from renderer")

    //How to receive information from Electron Main process:
    this.version = await this.asyncGetVersion()

    //Or call directly:
    this.dependencies = await window.api.getDependencies()

    this.nodeVersion = this.dependencies["node-version"]
    this.chromeVersion = this.dependencies["chrome-version"]
    this.electronVersion = this.dependencies["electron-version"]

  },
  methods: {
    async asyncGetVersion() {
      //Electron Preload process (located in preload.js) defines method called below:
      return await window.api.getVersion()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

I also found a great video explaining when and how to make use of Inter Process Communication (or IPC for short) here. If you need any more information about IPC, I would refer to the Electron documentation found here. For more information regarding the ipcRenderer module you could find more documentation here.

Communication between main process and renderer process can be achieved with the ipcRenderer by importing ipcMain (import { ipcMain } from 'electron') and implement a listener such as:

ipcMain.on("greet", (event, args) => {
  console.log(args)
})

ipcMain.handle("version", async (event, args) => { return 1 })

These lines could for example be added to the bottom of the background.js file (main process of Electron).

More information about processes can be found here and here.