Multiple Vue apps mounted cause empty devtools on Chrome
Author: roy-rogerrogerCreated May 7, 2024Updated Feb 14, 2025
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')- Open Chrome developer console and refresh your page.
- 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
Source: vuejs/devtools-v6