Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiple Vue apps mounted cause empty devtools on Chrome #2165

Open
roy1345 opened this issue May 7, 2024 · 3 comments
Open

Multiple Vue apps mounted cause empty devtools on Chrome #2165

roy1345 opened this issue May 7, 2024 · 3 comments

Comments

@roy1345
Copy link

roy1345 commented May 7, 2024

Vue devtools version

6.6.1

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-wh3but?file=package-lock.json

Steps to reproduce & screenshots

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const app2 = createApp(App)

app2.mount('#app2')

await new Promise((resolve) => {
  setTimeout(() => {
    app2.unmount();
    resolve('Loading completed')
  }, 5000);
});

app.use(createPinia())
app.mount('#app')
  1. Open Chrome developer console and refresh your page.
  2. Take a look at the Pinia/Vuex tab (it's empty)

What is expected?

Opening Chrome developer console, going to the Vue devtools should show the entries of the Pinia/Vuex store immediately.

What is actually happening?

Devtools is showing empty Pinia/Vuex store. I have to close the developer console (f12) from Chrome and reopen the developer console to see the Pinia/Vuex store entries.

System Info

The problem occurs on Chrome. On Firefox this does work normally.

[Version 1.65.114 Chromium: 124.0.6367.60 (Official Build) (64-bit)](https://brave.com/latest/)

Any additional comments?

No response

@jackchoumine
Copy link

jackchoumine commented May 20, 2024

I have this issue too:

image

chrome vesion: 124.0.6367.208 64bit

@jackchoumine
Copy link

I find a hack solution: umount App beforeunload:

window.onbeforeunload = () => {
  console.log('onbeforeunload 卸载 App');
  app.unmount();
}

@roy1345
Copy link
Author

roy1345 commented May 28, 2024

I find a hack solution: umount App beforeunload:

window.onbeforeunload = () => {
  console.log('onbeforeunload 卸载 App');
  app.unmount();
}

Thanks a lot for your help/hack. However for me it doesn't work. Probably because my situation is not exactly the same as described above. I also have multiple plugins that mount as apps and keep running and are not "unmounted".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants