External/secondary screen with a different Vue template

[jsgv]

I am trying to create a second Window with a different html file than main.html. I am successfully creating the window and using the new external.html template, but am unsure about how to use its own vue template.

Folder structure

app/
  assets/
  components/
  App.vue
  background.js
  external.html
  External.vue
  main.html
  main.js
  package.json

background.js

import { app, BrowserWindow } from 'electron'
import path from 'path'

let mainWindow
let externalWindow

app.on('ready', () => {
  createMainWindow()
  createExternalWindow()
})

app.on('window-all-closed', () => {
  app.quit()
})

function createMainWindow () {
  mainWindow = new BrowserWindow({
    width: 600,
    height: 800,
    x: 0,
    y: 600,
    center: false
  })

  const mainURL = process.env.HOT
    ? `http://localhost:${process.env.PORT}/main.html`
    : 'file://' + path.join(__dirname, 'main.html')

  mainWindow.loadURL(mainURL)

  if (process.env.NODE_ENV !== 'production') {
    mainWindow.openDevTools({mode: 'bottom'})
  }

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

function createExternalWindow () {
  externalWindow = new BrowserWindow({
    width: 600,
    height: 800,
    y: 0,
    x: 680,
    center: false
  })

  const externalURL = process.env.HOT
    ? `http://localhost:${process.env.PORT}/external.html`
    : 'file://' + path.join(__dirname, 'external.html')

  externalWindow.loadURL(externalURL)

  if (process.env.NODE_ENV !== 'production') {
    externalWindow.openDevTools({mode: 'bottom'})
  }

  externalWindow.on('closed', () => {
    externalWindow = null
  })
}

Secondary window is loading external.html file correctly, but I'm unsure of how to have it load the External.vue file.

The secondary window is looking for the #app element.

[Vue warn]: Cannot find element: #app

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'

Vue.use(VueRouter)

const router = new VueRouter({
  hashbang: false,
  abstract: true
})

router.map({
  '/': {
    name: 'home',
    component: Vue.component('home', require('./components/Home'))
  }
})

router.start(App, '#app')

[bradstewart]

In short, you need to generate a separate webpack bundle and HTML file for each window. This is kind of clunky and involves a lot of duplication with the current setup.

Try something like this:

• Create an external.js file next to main.js
  • Should basically be a copy of main.js, but referencing External.vue instead of Home.vue.
• Add a second external entry point to the webpack.dev-main.conf
• Add a second HtmlWebpackPlugin to generate external.html to the webpack.dev-main.conf
  • Be sure to exclude the app bundle from external.html and vise versa.
• Do the same thing in webpack.prod.conf (yea, I'm sorry...)

[jsgv]

It worked. Thank you!