Sample app for Vue.js 3

General Questions
1

The documentation mentions “upcoming” sample apps for several frameworks:

The sample app is built with JS code and TypeScript. An official Vue, React, and Angular version will be added soon.

May we know when we should expect ones? In particular, our team is interested in a sample app built on the latest version of Vue.js 3 (without Vuex/Router/etc.)

We have nine apps built on Vue.js 2 (they all have multiple windows) and one recent app built on Vue.js 3 (it has only one window). However, we cannot upgrade those nine apps to Vue.js 3 because the reactivity system gets broken whenever we share our data between multiple windows.

We’ve tried various approaches and none of them worked with Vue.js 3. We have different types of data in the background window and if we change the data there, other windows “don’t know” anything about those changes in Vue.js 3.

3

@surgeon can you please provide us one of these vue3 apps so we’ll be able to reproduce this issue?

4

I have a sample app with multiple windows on Vue.js 3, this is our most “successful” implementation. It changes values of two different counters every second and exposes them to all windows.

playground-app.zip (324.6 KB)

Install and build (tested on Node.js v16.13.0):

  1. npm i
  2. npm run dev -- --title=demo

You will need /dist/demo to load it as an unpacked extension. I included all the files after building in the .zip file above, so you can load the app right away without npm commands. If you make any changes in the source code, you will need to use the commands above.

Here’s some source code overview:

  • vue.config.js simply collects information about the app to build a project (we have several apps in the areas folder in our real project).
  • /areas/demo/config/settings.js specifies how to build the demo app.
  • /areas/demo/config/config.js is basically how we try to share common data between windows.
  • /areas/demo/config/sharedData.js contains the data we expose to all windows.
  • /areas/demo/config/Resolver.vue allows to load components of our windows dynamically.
  • /areas/demo/windows/background.vue opens all desktop windows and changes the shared data every second.
  • /areas/demo/windows/desktop-1.vue, desktop-2.vue and desktop-3.vue simply display the data in UI.

If you open the app, the reactivity system will work only in one of the windows. For example, it works in the 3rd window here:

image
image721×660 11.4 KB

If you close the window where it works (the 3rd one in my case), the reactivity system will work in some other window (in the 1st one in my case):

image
image719×513 5.85 KB

In addition to it, the reactivity system will never work in the background window with this approach (you can check Elements in dev tools to see the counter never changes):

image

We’ve tried some other approaches in the past but I do not have the source code for them anymore. Please let me know if you need more information.

8

looks like there is somthing with the initliztion timing.
beacuse if u open each window devtools and refresh the page is start working.

also each window.sharedData do gets updates (only the ui not, until rereshing the page)/

please note that
overwolf.windows.getOpenWindows(windows => {});
may not return the window while calling it to soon, try maybe to it in delay,

image
image782×918 23.2 KB

9

The data is changed in the background window as expected. However, when you refresh a desktop window, it simply gets the latest data from the background window. That said, the reactivity system still does not work, you just retrieve the latest data once per refresh.

I did add setTimeout but obviously it makes things even worse:

image
image1673×487 47 KB

In my opinion, the problem is the Proxy object in JavaScript gets broken somehow when we use overwolf.windows.getMainWindow().

Just to be clear: Vue.js 2 and Vue.js 3 use two completely different reactivity systems. What worked for us in Vue.js 2 does not work for us in Vue.js 3 anymore. We tried to “invent” a new approach but everything fails. That’s why I asked here if Overwolf is able to provide a sample app that actually works and covers our needs.

10

you need somehow to create localdata for each window (which is bind to the ui), and the backgroud window should update it for each window.

when you do that:

image
image837×316 16.8 KB

beascly only the last create window will set the coreWindow (background) proxy.
(you override the same background window)…

have you try to raise question in our developers slack?
maybe another developer already handle such cases…

11

I guess the initial example is a complex one, I have a better sample app example to demonstrate the issue:

playground-app-2.zip (317.4 KB)

You only need background.vue and desktop-N.vue here. You can see that I make the data globally available in the background window (the reactivity system works in the background window in this case). Then I get the data in desktop windows from the background window using window.overwolf.windows.getMainWindow(). As a result, the reactivity system does not work in desktop windows at all (if you refresh desktop windows manually, you will see they get updated values properly).

This approach works in Vue.js 2 but it no longer works in Vue.js 3. The previous approach I posted here is a complete mess and I personally don’t understand how to fix it. I tried to do what you said with no luck.

Unfortunately, not many devs are using Vue for their apps here, I reached one long time ago and he didn’t move his app to Vue.js 3.

12

you are trying to binf 1 data source to multple windows, not sure how Vue sould support it out of the box.

as i under stand, you need to create local data source for each window, which you will need to update it throw the background window. and eachj window should bind to the local data source

13

Do you have any example?