Electron-vue: Push to a route from Main process

[iamazik]

Describe the issue.

# I'm unable to call or push to a Vue route from the main process, nor I found any documentation about it anywhere. How do you call a Vue route from the main process?

How can I reproduce this problem?

# I am wanting to call a Vue route from the main process for the menu. Once a menu is clicked, I want the Vue router to be triggered to change the window.

{
  label: 'Account',
  submenu: [
    {
      label: 'Log out'
      click () {
        this.$router.push('/logout')
      }
    }
  ]
}

This doesn't work since the this.$router isn't available on the main process and couldn't find a guide to do that. What would be the best way to achieve this? _Got any clue?_

[marceloavf]

I think you need to use Ipc to send a comand from main to renderer, so then it could handle the logout

[SimulatedGREG]

@iamazik

You would definitely want to use the ipc modules that electron provides. They are by far the easiest method to use when communicating between the main and renderer processes. Here is a simple example.

src/main/index.js

/* with scope access to mainWindow */

function navigate (routePath) {
  if (mainWindow.webContents) {
    mainWindow.webContents.send('navigate', routePath)
  }
}

src/renderer/App.vue

<script>
  export default {
    mounted () {
      this.$electron.ipcRenderer.on('navigate', (e, routePath) => {
        this.$router.push(routePath)
      })
    }
  }
</script>

Now you can call navigate in your main process with the route you want to push to.