fix: Component tree not loading in popup

[TechAkayy]

🐛 The bug

Component tree loads just fine when it's in-app, and doesn't load in the popup picture-in-picture mode, probably losing connection with the app.

Popup doesn't work in stackblitz due to a limitation explained in this issue #687, so below reproduction is a github for cloning and testing it in local dev environment.

In-app:

Popup:

• Browser - Chrome Version 126.0.6478.114 (Official Build) (arm64)
• Operating System: Darwin
• Node Version: v20.14.0
• Nuxt Version: 3.12.3
• CLI Version: 3.12.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, modules
• Runtime Modules: -
• Build Modules: -

🛠️ To reproduce

https://github.com/TechAkayy/nuxt-devtools-popup

🌈 Expected behavior

Popup should connect to the app and load component tree.

ℹ️ Additional context

No response

[fmoessle]

It also doesn't work with Pinia. using the lastest version of nuxt and devtools.

[Flamenate]

Can confirm, having the same issue.

[erikahumadakandc]

Same here

[barayuda]

@danielroe @antfu could you please take a look this issue?

same issue facing this week, nuxt version: 3.14.1592, and pinia version: 0.8.0

and this overview of NuxtDevtools

both of Component tree and Pinia didn't work

[barayuda]

Update, on my side, I just remove "Vue Devtools extension" from my browser (or might be update to latest one, I'm not testing yet)
And worked perfectly, found the solution from here: #724
The other note from me it was, "If the Vue Devtools Extension" still exists on our browser, this make our Nuxt 3 project start very slow and annoying not found route "/" when open my project at the browser.

This PR here explain more about details regarding this issue.

So, please folks to consider remove the vuedevtools (or update to latest once) before start to develop your Nuxt 3 web app.
Hopefully help others 🎉

here preview that pinia and component tree now working.