Stores don't show up in nuxt devtools 3.16 #2952
Replies: 6 comments 9 replies
-
|
For clarification: I don't have any browser extensions installed and have tried this in multiple browsers all with the same result |
Beta Was this translation helpful? Give feedback.
-
|
It works fine on my end: It could be something specific in your setup? Moving to a discussion. |
Beta Was this translation helpful? Give feedback.
-
|
did you use the pinia/nuxt module ？ |
Beta Was this translation helpful? Give feedback.
-
This looks like it's my stackblitz |
Beta Was this translation helpful? Give feedback.
-
|
@posva I'm quite confused as i've tried it with 4 browsers now with literally no extensions installed. I can't think of anything that would prevent the stores from loading in the view. I've isolated it to this function call in pinia: // registerPiniaDevtools
devtoolsApi.setupDevtoolsPlugin({
id: 'dev.esm.pinia',
label: 'Pinia 🍍',
logo: 'https://pinia.vuejs.org/logo.svg',
packageName: 'pinia',
homepage: 'https://pinia.vuejs.org',
componentStateTypes,
app,
}, (api) => {
... // This is never called in any of my browsers
}); |
Beta Was this translation helpful? Give feedback.
-
|
I've also noticed in the plugin order that What setup are you using @posva ? |
Beta Was this translation helpful? Give feedback.
-
|
I fixed it by changing this: import { createPinia, setActivePinia } from 'pinia'
import type { Pinia } from 'pinia'
import { defineNuxtPlugin, type Plugin } from '#app'
import { toRaw } from 'vue'
const plugin: Plugin<{ pinia: Pinia }> = defineNuxtPlugin({
name: 'pinia',
dependsOn: ['nuxt:checkIfLayoutUsed']. // Added this
setup(nuxtApp) {
const pinia = createPinia()
nuxtApp.vueApp.use(pinia)
setActivePinia(pinia)
if (import.meta.server) {
nuxtApp.payload.pinia = toRaw(pinia.state.value)
} else if (nuxtApp.payload && nuxtApp.payload.pinia) {
pinia.state.value = nuxtApp.payload.pinia as any
}
// Inject $pinia
return {
provide: {
pinia,
},
}
},
})
export default pluginThere is a plugin without name that is called right after |
Beta Was this translation helpful? Give feedback.
-
|
I'm unsure why this works for @posva but i needed to add this code change to make it work |
Beta Was this translation helpful? Give feedback.
-
|
That's weird. It might be worth checking with Nuxt as it used to work in the previous version and there should be no requirement of specific dependsOn. |
Beta Was this translation helpful? Give feedback.
-
|
@posva They upgraded vue devtools and did a bunch of changes in the nuxt devtools i think, for one in this one: I'm curious how it's still working for you if i'm being honest |
Beta Was this translation helpful? Give feedback.
-
|
@posva This one is probably the issue: nuxt/devtools@v1.7.0...v2.0.0#diff-3052b465f80769fc606a22db21ef75d0cf440b2a827d8dc73895a714562f0b8f Like i mentioned to be able to hook onto the devtools, they have to be initialized first otherwise the setup function for pinia is never called so it never registers the tree nodes. I saw that recently there was an issue about always registering the tree nodes instead of when the store is loaded, but funnily enough if you were to check if devtools are hooked and do it on the useStore call it would probably fix it. But the main issue probably requires input from the nuxt team |
Beta Was this translation helpful? Give feedback.
-
|
I'll add an issue on the nuxt repo |
Beta Was this translation helpful? Give feedback.
-
Reproduction
https://stackblitz.com/edit/nuxt-pinia-issue-3-16
Steps to reproduce the bug
Expected behavior
I expect the stores to show up just like in version 3.15
Actual behavior
The stores don't show up and instead just show an empty tab
Additional information
No response
Beta Was this translation helpful? Give feedback.
All reactions