fix: vue devtools tab doesn't show up in chrome devtools

[v-moravec]

🐛 The bug

After updating my projects to last version of Nuxt I noticed Vue Devtools chrome extension isn't showing up anymore. I found this issue - https://github.com/vuejs/devtools/issues/2138, but downgrading just @vue/devtools-api to 6.5.1 didn't work. After further investigation, I realized version of @nuxt/devtools changed as well. When I downgraded to 1.0.8 Vue devtools tab appeared - be careful, you need to close the tab and open a new one to get full refresh of the extension.

I suspect there is a version missmatch here (you might need to click on Load diff to see the referenced lines) you can see, that some parts of Vue devtools have version 7.x.x, while there is also a dependency to @vue/devtools-api: 6.6.1. I'm not sure if that's correct assumption or version of one package has nothing to do with the other and you can use them together. Anyways there is a problem in version 1.1.0 of @nuxt/devtools package.

🛠️ To reproduce

Doesn't work - https://github.com/v-moravec/devtools-bug Works - https://github.com/v-moravec/devtools-bug/tree/fix

🌈 Expected behavior

Vue Devtools tab should be present.

ℹ️ Additional context

No response

[JhumanJ]

My vue devtools also disappeared yesterday (I probably updated dependencies). I tried using 1.0.8 but it didn't help unfortunately

[v-moravec]

@JhumanJ have you added @nuxt/devtools: 1.0.8 to your package.json, removed node_modules and lockfile and installed dependencies again?

[JhumanJ]

Just tried again, no success 😢 I tried many things including removing & downgrading the chrome extension but nothing worked unfortunately. I also tried with firefox and it didn't work either

[JhumanJ]

"Fixed" by setting devtools: {enabled: false} in nuxt config... Seems like both are not compatible anymore https://github.com/nuxt/nuxt/issues/26461#issuecomment-2016790364

[noook]

@JhumanJ can you show the line in your package.json referencing the Nuxt devtools ? My guess is that @nuxt/devtools@1.1.3 version falls under the version range your package.json defines.

Try defining it like this:

"@nuxt/devtools": "~1.0.0",

[JhumanJ]

I just tried both versions. In both cases, i need devtools: {enabled: false} for vue dev tools to work

[v-moravec]

Could you try to move the dependency to dependencies instead of devDependencies? https://github.com/v-moravec/devtools-bug/blob/fix/package.json#L16

[pjatx]

Thanks @v-moravec! Was pulling my hair out over this. Downgrading to 1.0.8 brought vue dev tools back for me.

[noook]

@JhumanJ, I managed to downgrade to 1.0.8 by deleting the lockfile and pinning the dependency as mentioned above (in devDependencies), then reinstalling

"@nuxt/devtools": "~1.0.0",

Resolves to

devDependencies:
  '@nuxt/devtools':
    specifier: ~1.0.0
    version: 1.0.8(nuxt@3.11.1)(vite@5.2.4)