fix: Vue warning: Extraneous non-props attributes (data-v-inspector)

[neneodonkor]

📚 What are you trying to do?

I got a warning after I upgraded for the previous version of Nuxt in my project. Although it is not a major bug, it would be nice to know where the issue is in my code. Maybe if someone could explain, it could be of help. I suspect it has to do with passing down props.

🔍 What have you tried?

No response

ℹ️ Additional context

No response

[ivan-angjelkoski]

i also get this issue when using the devtools and with Shadcn-Vue,
when in SSR, i get this warning in terminal/server console, but on browser its fine..
if i turn off SSR, then again in browser is fine but i dont have SSR.

so im guessing its something with this module... if not i need to open a ticket in shadcn-vue.

to recreate this issue, just install shadcn-vue in nuxt, and try using the components, even the example ones yield this error...

note: the examples on stackblitz use vue, not nuxt.

@antfu any hints?

[one-222333]

"I also encountered this problem. You can temporarily solve it by setting componentInspector: false:

devtools: {
  enabled: true,
  componentInspector: false
}

Link: #259 (comment)"

[neneodonkor]

componentInspector: false

Thanks for the suggestion.

[jonasfroeller]

Any update on this? I like the inspector and I want to use it, but that warning fills my whole console.

[neneodonkor]

Any update on this? I like the inspector and I want to use it, but that warning fills my whole console.

@jonasfroeller There is no update now. Just put this in your nuxt config file: componentInspector: false

[HummingMind]

Same issue.
Setting componentInspector: false gets rid of the warnings, but also, if you accidentally click on the component inspector icon in the devTools (little crosshair), it won't let you click on anythig else and it won't bring up the dev tools UI either.

So, if componentInspector: false is set, the icon shouldn't even be shown or should be greyed out (not clickable). But yeah, I like the component inspector as well, and hopefully there is a way to fix this so it doesn't generate the warnings.

Thank you!

[arashsheyda]

@HummingMind can you open a new issue about the icon be greyed out. thanks!

[HummingMind]

@HummingMind can you open a new issue about the icon be greyed out. thanks!

Sure. I'll open one later today.

Edit: done

[antfu]

It might caused by webfansplz/vite-plugin-vue-inspector#91 (suggested by @webfansplz).

Downgraded it in @nuxt/devtools@1.5.2 - please give it a try and let me know if it improves. Thanks!

[HummingMind]

@antfu
Yes, the warnings (in radix-vue components) are gone with devtools 1.5.2 (component inspector enabled)

Thank you!