help: Pinia stores are empty in devtools

[wanderowski]

📚 What are you trying to do?

Hello!

We just initialized our monorepo with three nuxt projects in it. The problem is that we use pinia in our projects and if I open devtools, I see the pinia tab, but all the stores inside are empty. I tried to google it out, but I cannot find anyone with the same issue. Any ideas on how to solve this?

🔍 What have you tried?

No response

ℹ️ Additional context

No response

[arashsheyda]

Please provide a minimal reproduction. Thanks.

Why reproduction is required

[dvogelg4al]

Happening to me too in Chrome (incognito also doesn't work), working in Firefox and Edge. Can't really provide a reproduction since it worked fine for months and just seemingly randomly stopped working

[martinszeltins]

I upgraded from Nuxt 3.13 to 3.14 and now I also see "No Data"

[TheAlexLichter]

Repro is https://stackblitz.com/~/github.com/martinszeltins/nuxt-3-14-pinia-issue?file=app.vue from https://github.com/nuxt/nuxt/issues/29944

[OrbisK]

Repro is https://stackblitz.com/~/github.com/martinszeltins/nuxt-3-14-pinia-issue?file=app.vue from nuxt/nuxt#29944

does not repoduce for me.

A friend of mine got the same problem and we discovered that it is (atleast for him) related to the chrome extension vue dev tools. Removing vue devtools fixed it for now, or opening the vue devtools pinia tab.

Ill try to reproduce today :)

[OrbisK]

Reproduction:

• clone https://github.com/OrbisK/nuxt-devtools-pinia (fresh nuxt installation with nuxt pinia), dont use sandbox/stackblitz
• pnpm i && pnpm dev
• make sure to have Vue devtools chrome extension (v. 7.6.4 for me)
• open http://localhost:3000
• open nuxt devtools pinia -> no data
• open vue devtools pinia -> data in vue and nuxt devtools
• open a incognito (private) tab (ctrl + shift +n) or remove/disable vue devtools
• open nuxt devtools again
• data is there

[martinszeltins]

@OrbisK I just tested with Vue Devtools extension and it looks like that is the problem. If Vue devtools ir enabled then it breaks. But it happens starting with Nuxt 3.14

[wanderowski]

@martinszeltins @OrbisK @manniL Thank you for your answers! I completely forgot about this issue. I recently installed the Vue Devtools extension, and now I use it to check my stores. However, I want to mention that the problem appeared for me before the extension was installed. Disabling the extension doesn’t solve the issue for me either.

[dvogelg4al]

Disabling the vue extension worked for me, thanks all.

[SteveChurch]

Repro is https://stackblitz.com/~/github.com/martinszeltins/nuxt-3-14-pinia-issue?file=app.vue from nuxt/nuxt#29944

does not repoduce for me.

A friend of mine got the same problem and we discovered that it is (atleast for him) related to the chrome extension vue dev tools. Removing vue devtools fixed it for now, or opening the vue devtools pinia tab.

Ill try to reproduce today :)

Also the Vue extension for me was causing this issue.

[Koshux]

@OrbisK I just tested with Vue Devtools extension and it looks like that is the problem. If Vue devtools ir enabled then it breaks. But it happens starting with Nuxt 3.14

Indeed, it was the legacy vue extension all along. I have to maintain both nuxt 2 and 3 projects so I didn't consider the conflict. I actually used the legacy extension to check the pinia store state as well.

Thank@martinszeltins

[IfnotFr]

On my side, the plugin shows randomly data or no data and I can't determine why ... I don't have vue devtools plugin enabled.

But installing the plugin solved the issue ... now I have Pinia data in the panel 🤦‍♂️​

[serkon]

It’s not stable. Sometimes it displays correctly, but other times it shows "no-data". The first initialization starts with "connecting"; I managed to see it working once, but when I press the "Reset Local Settings and States" button in the settings, everything disappears. Also, no matter what I do, I can’t see the stores again. I waited on the "connecting" screen for more than 10 minutes, but in the end, when refreshed the page quickly "no-data" appeared.

using Nuxt 4.0.3

[thyngster]

This happens to me when using the BetterAuth and a middleware or a plugin, the await time makes it to randomly fail.

Doing a: await new Promise(resolve => setTimeout(resolve, 1000)) will also prevent pinia to show up on devtools

[serkon]

By the way, "Nuxt Assistant (Nuxt Assistant — developer-friendly debugging tool for Nuxt apps)" extensions shows Pinia stores correctly. I know, I don't use extensions "at the same time". I only install that plugin for test and then uninstalled.

[harlio]

I encountered this issue as soon as I upgraded to Nuxt 4. Installing the Vue browser extension and clicking on the Pinia tab there fixes the no-data issue in Devtools, but it's not a great solution.

[fishDev94]

still doens't work for me with Nuxt 4.2.0, even if i remove vue devtools, any clue?

[thyngster]

I know this is not a bugfix but if you click on the Render Tree, then on the App element, and then you click back to Pinia it will work. Not the best option but at least it will work until this get fixed...

[martinszeltins]

I know this is not a bugfix but if you click on the Render Tree, then on the App element, and then you click back to Pinia it will work. Not the best option but at least it will work until this get fixed...

Crazy workaround but it works for me too! cc. @antfu

[rrmn]

Looks like somebody has a problem with reactivity...

[brandonaaskov]

I know this is not a bugfix but if you click on the Render Tree, then on the App element, and then you click back to Pinia it will work. Not the best option but at least it will work until this get fixed...

I can't believe that works. Definitely a bug with the tools themselves, but I can live with the idiosyncratic workaround for now.