Electron-vue: how to open new window

[xu455255849]

I want to show my chart on the new window , but below code is not work . I need to send data to the new window . how can i do , thanks.

vue is a SAP APP, so i create a new page to do this , whether has another better way？

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

[randyou]

Your webpack should have multiple entries.
multiple entries
set plugins

[marceloavf]

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'),
 },

---

If your need another approach, take a look at this repo:

• - The creating of another window
• - Calling it from a menu or via ipc

[xu455255849]

it is work, thank you

[marceloavf]

Refs #207

[SimulatedGREG]

Thanks for the help @marceloavf !

[3zbumban]

new BrowserWindow({
    width: 400,
    height: 320,
    webPreferences: { webSecurity: false, nodeIntegration: true },
    show: false,
  });

In my case it worked after adding nodeIntegration: true to the BrowserWindow options.

It turns out, nodeIntegration was true by default in previous electron versions, but false by default in 5.0.0.

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'),
 },

If your need another approach, take a look at this repo:

• - The creating of another window
• - Calling it from a menu or via ipc

_versions:_
chrome: "73.0.3683.121" electron: "5.0.8" node: "12.0.0" v8: "7.3.492.27-electron.0"

[hanjt]

@3zbumban My code like this

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)
})

After build it, new window is blank when open it in the main window

[3zbumban]

@hanjt
make sure that:

• [ ] it works with your main BrowserWindow
• [ ] do you have set the vue-router to mode: 'history' (src/renderer/router/index.js)
• [ ] you are serving on the right port (in your case 9080)
• [ ] you are passing in a process.env.NODE_ENV (try to log it to the console). you might be using the vue-cli-service to serve or build your app which desides based on the command wich NODE_ENV to use.
• [ ] do you have content created that can be displayed? and added to your routes?

you also might want to check out vue-cli-plugin-electron-builder in my opinion the simplest way to use vue inside electron.