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.

[WoutGeeurickx]

Hey guys,

I'm porting my existing 'pure' electron app over to include vue and I (successfully) implemented opening multiple windows using above approach. However I encountered some unexpected (at least for me) behavior. On the pure electron app I used to do something like this

const secondWin = new BrowserWindow({width: 400, height: 320, show: false)

secondWin.loadUrl('url/to/load')

secondWin.once('ready-to-show', () => {
    secondWin.show()
    firstWin.hide()
})

secondWin.on('close', () => {
    firstWin.show()
})

The idea was to have some kind of landing page that you dismiss when opening the second window, but that pops back up when you close that window.

When using above approach with this same setup, I noticed that I got the second window, but the first window wasn't hidden. By inserting some logs I noticed that the 'ready-to-show' is actually never fired.
Does any of you have any idea why 'ready-to-show' isn't fired? And does any of you have any idea why the second window is actually showing if I initially set 'show' to false and the line where I call show() is never reached since it's in the 'ready-to-show' callback?

I can get everything working as expected when I move the two lines outside the 'ready-to-show' handler, but I'm just curious to know why this is behaving differently than what I would expect.

Best,
Wout

[maxoyed]

@marceloavf That works for me, thanks

[dragos-boisteanu]

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](https://github.com/webtorrent/webtorrent-desktop/blob/master/src/main/windows/about.js#L14)

* [- Calling it from a menu or via ipc](https://github.com/webtorrent/webtorrent-desktop/blob/master/src/main/menu.js#L435)

I have just tried this and it opens the entire app again instead of just the component I want. This is like opening a new instance of the app and setting it's router to a specified path. Is there any way to open component in a new browser window while keeping the main app settings, package, etc without reloading the entire app ?