How can I access a component and make it appear only in an Electron + Quasar window?

Question

I would like the component to be displayed exactly in a single window, but I don’t know how to do it precisely, what I was able to do was just a small base of a whole, so far:

ipcMain.on('open-chat-window', (event) => {
  const janelasChat = []
  const chatWindow = new BrowserWindow({ 
    width: 750,
    height: 650,
    useContentSize: true,
    autoHideMenuBar: true,
    webPreferences: {
        nodeIntegration: process.env.QUASAR_NODE_INTEGRATION,
        nodeIntegrationInWorker: process.env.QUASAR_NODE_INTEGRATION
    },   
    backgroundColor: "#1d1d1d"
  })

  chatWindow.loadURL()

  janelasChat.push(chatWindow)
  event.reply('Janela de Chat Aberta')
})

My goal is to get the user to press a button on a component of the main window and the system to respond by creating a new window, this is the part of the code that invokes the creation of this window. But as you can see, I need to insert a url into loadURL() and what the Quasar offers me is the variable coming from it where I can use the components/pages/layouts within the project, called:

process.env.APP_URL

But by calling this variable inside the loadURL(), it will render all components, pages and layouts of which I have worked systematically, which goes against my goal, I just want to render a component within this new screen.

methods: {
    async openChatWindow () {
        if (this.$q.platform.is.electron) {
            const { ipcRenderer } = require('electron')
            ipcRenderer.send('open-chat-window')
        }
    }
}

This is the method from which when invoked inside the component in the Main Window, opens a new Window, but since it is without the url, it returns an error. How can I proceed with the best solution for this?

Answer 1

You need to pass the URL in the Electron process over the same variable that Quasar has a concatenation with the route you will pass. loadURL(process.env.APP_URL + "#/URL")