Creating menus is simple enough in Electron, but how in the world do you tell your Renderer process to do something?! I couldn’t find any existing resources on this so hopefully this helps you.
In your menu/index.js set up your menu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { app, BrowserWindow, Menu } from 'electron' const template = [ { label: 'Test', submenu: [ { label: 'Launch a function in Renderer process', click: () => { mainWindow.webContents.send('hello', 'Hello World!') } } ] } ] const menu = Menu.buildFromTemplate(template) Menu.setApplicationMenu(menu) |
In your renderer/main.js add a listening function:
|
1 2 3 4 5 6 7 8 9 |
import router from './router' const electron = require('electron') electron.ipcRenderer.on('hello', (event, arg) => { // Get the current Vue instance (i.e. which component/route is currently active) let component = router.currentRoute.matched[0].instances.default component.someReactiveData = 'Received message from main process }) |
Tada! You can now successfully run any renderer function you like from your application menus. 🙂
Here’s some other types of ways you can communicate between the two processes: http://electron.rocks/different-ways-to-communicate-between-main-and-renderer-process/
How are you setting the “this.$electron”, where is “$electron” coming from?
I had added it to the Vue prototype, but you can access Electron from the renderer process like this:
const electron = require('electron')