Support for multiple browser windows

[florianlink]

Introduction

We are using Quasar as frontend UI for our medical imaging applications. We want to support multiple windows/screens by opening secondary browser windows from within our Quasar SPA and place the windows on different screens using e.g. https://developer.chrome.com/articles/multi-screen-window-placement/

This already works fine with Vue/Quasar using the window.open("", "someExtraWindow", windowFeatures)
and using a Vue 3 Teleport component to teleport Quasar UI components from the main Quasar SPA to the document.body of the new window.

Problems

The following problems arise when teleporting Quasar UIs to the other window's document.body:

• All popups like q-menu and q-tooltip are opened on the main window, even if the teleported component lives on a different window
• q-dialogs and q-loading etc. all appear on the main screen and we found no way to redirect them to the different document.body

Digging deeper, it seams that the problem drills down to the usage of use-portal and global-nodes, which always use the document.body of the main window:

https://github.com/quasarframework/quasar/search?q=use-portal
https://github.com/quasarframework/quasar/search?q=global-nodes

Feature request

Our feature request would be to support:

• q-menu/q-tooltip support for secondary windows (automatic recognition of the different body if possible, or some way to globally inject the different document.body on the teleported components)
• a way to set the different document.body for q-dialogs and q-loading explicitly so that we can support dialogs on the extra windows

Unfortunately I have no good idea how use-portal and global-nodes would have to be changed to support different body elements for different components.
I would be interested in possible solutions and would also be willing to develop a PR.

Why?

We need this design because our SPA is stateful and has a websocket connection to the backend, so we can't load a full own SPA on the extra window, we need to share the JavaScript context and the full pinia state + websocket of the main SPA with the extra windows.