fix: devtools not showing up for nuxt 3.16 #2953
Conversation
✅ Deploy Preview for pinia-official ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| /** | ||
| * Creates a Pinia instance to be used by the application | ||
| */ | ||
| export function createPinia(): Pinia { | ||
| export function createPinia(options?: CreatePiniaOptions): Pinia { |
There was a problem hiding this comment.
This will need to be documented but it shouldn't be a breaking change for anyone using it
|
Thanks for the PR. This is something that should be fixed in Nuxt devtools. In Vue devtools, they “collect” registrations that happen before the devtools are initialized and they set them up when possible. |
The issue is that it does in fact still buffer registrations, but it only does so if the plugins get registered after the buffers have been initialized. The issue with pinia's plugin is that it registers before they are initialized. There would be another way to fix it that would require the nuxt team to give the plugin a name so that we can load it afterwards, but that would also mean that it would load pinia after almost all other modules, which would break the pinia nuxt integration. Nuxt has a solution for this, which is the new devtools kit for specifically new nuxt devtools, but pinia/nuxt isn't using them. I would say the 3 options are:
But i don't believe the nuxt team will fix this as they don't officially support vue devtools integrations that skip the nuxt devtools. |
|
The devtools must work with both Vue and Nuxt. In this case, Nuxt must adapt to match Vue Devtools expectations. It will only be beneficial for the devtools to pick up native Vue devtools |
Nuxt only supports Vue 3. The setupDevtoolsPlugin is an API from Vue dev tools v6, which supports Vue 2. With the upgrade to Vue dev tools v7, they no longer support Vue 2. Nuxt now uses Vue dev tools v7, because they don't support Vue 2 and hence don't need to use Vue dev tools v6. Pinia uses the Vue dev tools v6 API internally, why would Nuxt, which doesn't support the V6 api from Vue dev tools care about this? The pinia/nuxt package needs to upgrade and stop using Vue dev tools v6, no other nuxt integration uses this API. Look at vueuse for example. |
Based on this issue in nuxt/devtools and this discussion here, after upgrading to nuxt 3.16 the devtools don't show up.
This is caused by the recent upgrade to their internal nuxt/devtools v2 which changes when the devtools are initialized. The registration only works correctly when the hook for it is added after vue devtools has setup up the subscribers, but with the new change in 3.16 the pinia plugin was loaded before that happens.
The main change is only registering the devtools after the app has mounted, which seems to be when vue devtools hooks are being subscribed based on hours of looking through their code.
https://github.com/vuejs/devtools/blob/d5f94279cf8e54fb05aa92209bcef767bb31b7c5/packages/devtools-kit/src/core/index.ts#L85C3-L107C5
I'm unsure of what needs to be tested or if we need to add anything or do anything because of the version change, but please let me know what i need to do. I'm also happy to downgrade the version here so we can support 3.15 but make it work in 3.16.
I've just had a long day trying to fix this 😅