Opening another Window with electron-vue

Having entered the world of Electron and mashing it together with Vue.js using electron-vue I needed to figure out how to open another window from Electron and still have vue active within it and better yet, still have the hot module reloading active in that new window whilst developing it.

It was whilst trawling the electron-vue github issue page that I came across a golden nugget of code that answered the very question for me.

https://github.com/SimulatedGREG/electron-vue/issues/401#issuecomment-330656658

Quoted:

First of all, you need to disable mode: 'history' in your vue-router, check in vue-router docs

Then do the following:

src/main/index.js example

ipc.on('showChart', function (e, data) {
  const modalPath = process.env.NODE_ENV === 'development'
    ? 'http://localhost:9080/#/showChart'
    : `file://${__dirname}/index.html#showChart`
  let win = new BrowserWindow({ width: 400, height: 320, webPreferences: {webSecurity: false} })
  win.on('close', function () { win = null })
  win.loadURL(modalPath)
})

In your router, use the exactly path to your url

src/renderer/router.js example

{
  path: '/showChart',
  name: 'showChart',
  component: require('your-router'),
},