devtools
devtools copied to clipboard
nuxt
fix: Pinia Tab no data since 2.5.0+
🐛 The bug
Tested with Chrome, Chrome Privacy Tab also with Firefox. Since 2.5.0 the Pinia Tab allways show no Data. There is also no Vue Devtools as a browser plugin We use the current Nuxt 3.17.6 version with features flags for the App Folder.
Up to version 2.5.0. of the DevTools we had no problems with the Pinia Tab.
🛠️ To reproduce
no needed
🌈 Expected behavior
That the Pinia Tab shows the data, at least after a reload of the browser.
ℹ️ Additional context
No response
I encountered the same issue and found two workarounds that resolve the issue:
1 - Using Vue.js Devtools Extension:
- Install the Vue.js Devtools extension.
- Open the page and press F12 to open dev tools.
- In the Vue tab, under Components, explicitly select App 3. This triggers the Pinia tab to load and populate data correctly both in the extension and in Nuxt Devtools.
2 - Disabling Nuxt Devtools:
- Disable Nuxt Devtools, using only the Vue.js Devtools extension, which directly loads and populates data as expected.
Both solutions worked for me
- In the Vue tab, under Components, explicitly select App 3. This triggers the Pinia tab to load and populate data correctly both in the extension and in Nuxt Devtools.
Thanks for this tip. Do you know if there is a way to keep this selected to App 3, upon browser refresh?
- In the Vue tab, under Components, explicitly select App 3. This triggers the Pinia tab to load and populate data correctly both in the extension and in Nuxt Devtools.
Thanks for this tip. Do you know if there is a way to keep this selected to App 3, upon browser refresh?
Unfortunately I don't know how to do this, what I do is keep nuxt devtools disabled and only use the Vue.js Devtools extension, this was the most usable way for me.
- In the Vue tab, under Components, explicitly select App 3. This triggers the Pinia tab to load and populate data correctly both in the extension and in Nuxt Devtools.
Thanks for this tip. Do you know if there is a way to keep this selected to App 3, upon browser refresh?
Unfortunately I don't know how to do this, what I do is keep nuxt devtools disabled and only use the Vue.js Devtools extension, this was the most usable way for me.
You can go in the "Render Tree" and select the App 3 option it will load the store, you can also disable the cache in the network tab of your browser dev tools, that will make it so the pinia store load everytime in the nuxt dev tools, no need for the extension
@nino-mau said it. I don't know if its a "bug" or not, but you have to select App 3 and then all the stores will be shown
VueElement selected:
Every time after a reload or rebuild, you have to go to the render tree and then switch to App to see the Pinia Store. Incidentally, I don't have any Vue Devtools in my browser, and caching is also disabled.
Why does DevTools connect to one of the VueElements every time and not directly to the app? One of the VueElements is the Devtools Panel. That is one of the main problems.
I just encountered this issue when updating Nuxt to v4. The Render Tree -> App 3 workaround does work, but having to go back through that workflow every time I refresh the page isn't a great DX.
I am also experiencing this issue with latest Nuxt 3.x. It seems to be related to using async middleware and/or plugins.
I found a solution. I force the version of the nuxt devtools in my dev dependencies: "@nuxt/devtools": "^3.0.1",
it's work for me.
Still having the issue... with all latest versions @LePtiDev what nuxt version do you use? and what pinia version do you use?
Hello @Korny666 for me i have this version:
- "pinia": "^3.0.3",
- "nuxt": "^4.2.0",
- "@pinia/nuxt": "^0.11.2",
- "@nuxt/devtools": "^3.0.1",
hope that help you.
@antfu you need to force the nuxt/devtools version to the last to make it works with pinia. If you use a fresh new project without installing the devtools the pinia tab is not working