Create sub-windows with the same JavaScript context

[raphaelmenges]

Hello 👋,

I am coming from Electron where I made heavy use of window.open in JavaScript. This would open a sub-window or popup that is in the same JavaScript context as its parent window. This allows to use the same vue instance in both the parent window and the sub-window, sharing Pinia store etc between both windows. To my understanding this is not possible in Tauri (v2?), because you cannot use window.open to open sub-windows.

What is your trick to create multi-window applications that have a common state? Shall I manage all state in Rust and tell the individual windows about changes?

[raphaelmenges]

Closely related to: #9423

[FabianLars]

To my understanding this is #1657 (comment), because you cannot use window.open to open sub-windows.

Just for reference, I think this is more fitting #4710 / tauri-apps/wry#649

Shall I manage all state in Rust and tell the individual windows about changes?

That's typically the first thing we recommend, yes. We also have a store plugin if you don't want to use Rust (it uses rust internally) and want that state to be persisted on disk.
There are also session-/localstorage based solutions i think, the specifics depend on your framework. If you search for a solution to share state across Browser Tabs for your framework you should hopefully find something.

[raphaelmenges]

Thank you for the clarification!

Specifically for the vue framework, what do you think is a better approach to realize multi-window applications with tauri:

1. Have a separate index.html for each window, defining distinct vue contexts for each window. This might be complicated to setup in vite and tauri.
2. Have one index.html and provide the contents per window via routing, e.g., index/settings and index/help. The vue contexts will be still separated across windows, yet, base on the same code. This might be easier to setup, however, might lead to confusion because the code looks like all windows share the same context but in reality they do not.

Perhaps you have experience or a gut feeling for the better approach!

[FabianLars]

I have 0 experience with vue but in react i prefer solving multiwindow with a single html file and a router (unless it's a really big app, at some point multiple html files may make sense).

But your worries about confusion are legit, but they are also your worries so you have to decide if that's a deciding factor for your project.

Now which one of those approaches is better for cross tab/window state/context sharing is something i really can't tell though i assume it's either the second option, or both the same.

Sorry for not being of much help here, i don't think anybody shared much of their experience with us (only asking upfront).

[pedrohjp]

Hey, im facing an similar problem rn. How did you end up working this out @raphaelmenges ?

[raphaelmenges]

Hello @pedrohjp! I ended up using a single index.html and the vue-router to have one route per window, e.g., /main and /settings. I am synchronizing the state of the windows via the main process and IPC messages. Perhaps something like https://github.com/wobsoriano/pinia-shared-state could simplify the synchronization process between windows further.

[maplelost]

@raphaelmenges Thank you. You pointed out the project https://github.com/wobsoriano/pinia-shared-state truly saved my life.