Pinia doesn't show up in devtools (Nuxt 3 app)

[wandolch]

Vue devtools version

6.5.1

Link to minimal reproduction

https://github.com/wandolch/nuxt3-playground

Steps to reproduce & screenshots

Nuxt 3 application that uses pinia 2.1.7 and @pinia/nuxt 0.5.1

Create any Pinia store and use it in a component, hydration enabled.

Vue devtools won't recognise that Pinia exists on client side:

There was a similar ticket in a SPA vue, the reason was that people should define Pinia after mounting the app. In Nuxt it's not the case because Pinia is defned inside @pinia/nuxt and I don't have control over it.

What is expected?

Pinia should appear in vue devtools.

What is actually happening?

Pinia doesn't appear in vue devtools, it's impossible to debug it.

System Info

System:
    OS: macOS 13.6.3
    CPU: (12) arm64 Apple M2 Max
    Memory: 3.81 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
    pnpm: 8.6.0 - ~/.nvm/versions/node/v18.15.0/bin/pnpm
  Browsers:
    Chrome: 120.0.6099.234
    Safari: 16.6
  npmPackages:
    vue: ^3.4.10 => 3.4.14

Any additional comments?

No response

[azmatzuberi]

I was having a similar issue and I just put the module at the very top and it worked. Although, I see you only have one module.

[amisora]

Having similar issue. Closing dev tools and refreshing the page seems to work occasionally. Looking forward to a reliable solution.

[rileyphoenixbytes]

Having the same problem, a solution would be very much appreciated.

[codeplayer71]

I have the same problem, has anything been done here yet?

[outlabsio]

Same issue here. The other dev on my team with the same environment can see it but I cant. I have another project that works fine.

[outlabsio]

Also, If im working on a project where the Pinia dev tools does appear and then swap over to a project where the pinia dev tools are not showing, the following error appears when opening up the nuxt devtools. Not sure if this is helpful

entry.Li7bMdxw.js:17 [nuxt] error caught during app initialization Error: Page not found: /modules/pinia at oc (entry.Li7bMdxw.js:17:48540) at entry.Li7bMdxw.js:34:19262 at r (entry.Li7bMdxw.js:17:30252) at Object.runWithContext (entry.Li7bMdxw.js:13:26767) at Rw (entry.Li7bMdxw.js:17:30282) at entry.Li7bMdxw.js:17:28578 at Sp.run (entry.Li7bMdxw.js:9:267) at Object.runWithContext (entry.Li7bMdxw.js:17:28570) at entry.Li7bMdxw.js:34:19240 at entry.Li7bMdxw.js:21:20524

[devmadhavv]

You can find pinia in Nuxt devtools