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!

[neneodonkor]

@HummingMind This might be shameful to ask, but please how do I downgrade?

[HummingMind]

@neneodonkor you just need to upgrade to the latest version of the nuxt devtools. I fyou are on version 1.5.2, it already uses an older (downgraded) version of the vite-plugin-vue-inspector package.

If you are using nuxt, you can run this:
npx nuxi upgrade --force

That should upgrade your pakcages to the latest version and it removes the lock file and node_modules before it reinstalls it:
reference

[neneodonkor]

@HummingMind ok I installed Nuxt about two days ago. But how can check the version of Nuxt/DevTools?

[jonasfroeller]

@neneodonkor

Windows:

npm list --depth=1 | findstr @nuxt/devtools 

Linux:

npm list --depth=1 | grep @nuxt/devtools

[neneodonkor]

@HummingMind Thanks for the assist.

[Ev357]

thx a lot for fixing it, this was so annoying ❤️❤️❤️

[jonasfroeller]

I still get this warning using ShadcnTooltipProvider (yes, I am using the latest versions of everything). The weird thing is, that I even disabled devtools and componentInspector in my nuxt.config.ts.
@neneodonkor could you please reopen? Please, I can not work like this. I am stuck for one week now, because of vuetsc and this issue. I want to work and I need to work on this project. I do not have that much time left.

---

• Operating System: Windows_NT
• Node Version: v18.19.0
• Nuxt Version: 3.13.2
• CLI Version: 3.14.0
• Nitro Version: 2.9.7
• Package Manager: pnpm@9.1.1
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

├── @nuxt/devtools-kit 1.5.2
├── @nuxt/devtools 1.5.2
├── @nuxt/devtools-kit 1.5.2

 WARN  [Vue warn]: Extraneous non-props attributes (data-v-14ce88ff) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 
  at <DialogRoot open=false modal=true onUpdate:open=fn<A>  ... > 
  at <DrawerRoot shouldScaleBackground=true onDrag=fn onRelease=fn  ... > 
  at <Drawer> 
  at <Index key="03348673-e6ea-4208-9df5-1d85e2a7461f" > 
  at <ClientOnly> 
  at <Dashboard> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/dashboard" vnode= { __v_isVNode: true,
  __v_skip: true,
  type:
   { __name: 'index',
     setup: [Function (anonymous)],
     ssrRender: [Function: _sfc_ssrRender],
     __file: 'A:/xxx/pages/index.vue' },
  props:
   { onVnodeUnmounted: [Function: onVnodeUnmounted],
     ref:
      RefImpl {
        dep: [Dep],
        __v_isRef: true,
        __v_isShallow: false,
        _rawValue: undefined,
        _value: undefined } },
  key: null,
  ref:
   { i:
      { uid: 43,
        vnode: [Object],
        type: [Object],
        parent: [Object],
        appContext: [Object],
        root: [Object],
        next: null,
        subTree: [Object],
        effect: null,
        update: null,
        job: null,
        scope: [EffectScope],
        render: [Function (anonymous)],
        proxy: [Object],
        exposed: null,
        exposeProxy: null,
        withProxy: null,
        provides: [Object <Complex prototype>],
        ids: [Array],
        accessCache: [Object: null prototype] {},
        renderCache: [],
        components: null,
        directives: null,
        propsOptions: [Array],
        emitsOptions: null,
        emit: [Function: bound emit],
        emitted: null,
        propsDefaults: [Object: null prototype] {},
        inheritAttrs: false,
        ctx: [Object],
        data: {},
        props: [Object],
        attrs: {},
        slots: [Object],
        refs: {},
        setupState: {},
        setupContext: [Object],
        suspense: null,
        suspenseId: 0,
        asyncDep: null,
        asyncResolved: false,
        isMounted: false,
        isUnmounted: false,
        isDeactivated: false,
        bc: null,
        c: null,
        bm: null,
        m: null,
        bu: null,
        u: null,
        um: null,
        bum: null,
        da: null,
        a: null,
        rtg: null,
        rtc: null,
        ec: null,
        sp: null },
     r:
      RefImpl {
        dep: [Dep],
        __v_isRef: true,
        __v_isShallow: false,
        _rawValue: undefined,
        _value: undefined },
     k: undefined,
     f: false },
  scopeId: null,
  slotScopeIds: null,
  children: null,
  component: null,
  suspense: null,
  ssContent: null,
  ssFallback: null,
  dirs: null,
  transition: null,
  el: null,
  anchor: null,
  target: null,
  targetStart: null,
  targetAnchor: null,
  staticCount: 0,
  shapeFlag: 4,
  patchFlag: 0,
  dynamicProps: null,
  dynamicChildren: null,
  appContext: null,
  ctx:
   <ref *1> {
     uid: 43,
     vnode:
      { __v_isVNode: true,
        __v_skip: true,
        type: [Object],
        props: [Object],
        key: null,
        ref: null,
        scopeId: null,
        slotScopeIds: null,
        children: [Object],
        component: [Circular *1],
        suspense: null,
        ssContent: null,
        ssFallback: null,
        dirs: null,
        transition: null,
        el: null,
        anchor: null,
        target: null,
        targetStart: null,
        targetAnchor: null,
        staticCount: 0,
        shapeFlag: 36,
        patchFlag: 0,
        dynamicProps: null,
        dynamicChildren: null,
        appContext: null,
        ctx: [Object] },
     type:
      { name: 'RouterView',
        inheritAttrs: false,
        props: [Object],
        compatConfig: [Object],
        setup: [Function: setup] },
     parent:
      { uid: 42,
        vnode: [Object],
        type: [Object],
        parent: [Object],
        appContext: [Object],
        root: [Object],
        next: null,
        subTree: [Object],
        effect: null,
        update: null,
        job: null,
        scope: [EffectScope],
        render: [Function (anonymous)],
        proxy: [Object],
        exposed: [Object],
        exposeProxy: null,
        withProxy: null,
        provides: [Object <Complex prototype>],
        ids: [Array],
        accessCache: [Object: null prototype] {},
        renderCache: [],
        components: null,
        directives: null,
        propsOptions: [Array],
        emitsOptions: null,
        emit: [Function: bound emit],
        emitted: null,
        propsDefaults: [Object: null prototype] {},
        inheritAttrs: false,
        ctx: [Object],
        data: {},
        props: [Object],
        attrs: {},
        slots: {},
        refs: {},
        setupState: {},
        setupContext: [Object],
        suspense: null,
        suspenseId: 0,
        asyncDep: null,
        asyncResolved: false,
        isMounted: false,
        isUnmounted: false,
        isDeactivated: false,
        bc: null,
        c: null,
        bm: null,
        m: null,
        bu: null,
        u: null,
        um: null,
        bum: null,
        da: null,
        a: null,
        rtg: null,
        rtc: null,
        ec: null,
        sp: null },
     appContext:
      { app: [Object],
        config: [Object],
        mixins: [],
        components: [Object],
        directives: [Object],
        provides: [Object: null prototype],
        optionsCache: [WeakMap],
        propsCache: [WeakMap],
        emitsCache: [WeakMap] },
     root:
      <ref *2> {
        uid: 0,
        vnode: [Object],
        type: [Object],
        parent: null,
        appContext: [Object],
        root: [Circular *2],
        next: null,
        subTree: null,
        effect: null,
        update: null,
        job: null,
        scope: [EffectScope],
        render: [Function: NOOP],
        proxy: {},
        exposed: {},
        exposeProxy: null,
        withProxy: null,
        provides: [Object <Complex prototype>],
        ids: [Array],
        accessCache: [Object: null prototype] {},
        renderCache: [],
        components: null,
        directives: null,
        propsOptions: [],
        emitsOptions: null,
        emit: [Function: bound emit],
        emitted: null,
        propsDefaults: [Object: null prototype] {},
        inheritAttrs: undefined,
        ctx: {},
        data: {},
        props: {},
        attrs: {},
        slots: {},
        refs: {},
        setupState: [Object],
        setupContext: [Object],
        suspense: null,
        suspenseId: 0,
        asyncDep: null,
        asyncResolved: false,
        isMounted: false,
        isUnmounted: false,
        isDeactivated: false,
        bc: null,
        c: null,
        bm: null,
        m: null,
        bu: null,
        u: null,
        um: null,
        bum: null,
        da: null,
        a: null,
        rtg: null,
        rtc: null,
        ec: [Array],
        sp: null,
        devtoolsRawSetupState: [Object] },
     next: null,
     subTree:
      { __v_isVNode: true,
        __v_skip: true,
        type: [Function],
        props: [Object],
        key: null,
        ref: null,
        scopeId: null,
        slotScopeIds: null,
        children: [Object],
        component: [Object],
        suspense: null,
        ssContent: null,
        ssFallback: null,
        dirs: null,
        transition: null,
        el: null,
        anchor: null,
        target: null,
        targetStart: null,
        targetAnchor: null,
        staticCount: 0,
        shapeFlag: 34,
        patchFlag: 0,
        dynamicProps: null,
        dynamicChildren: null,
        appContext: null,
        ctx: [Object] },
     effect: null,
     update: null,
     job: null,
     scope:
      EffectScope {
        detached: true,
        _active: true,
        effects: [],
        cleanups: [],
        _isPaused: false,
        parent: undefined },
     render: [Function (anonymous)],
     proxy: { name: [Getter/Setter], route: [Getter/Setter] },
     exposed: null,
     exposeProxy: null,
     withProxy: null,
     provides:
      Object <Object <Complex prototype>> {
        [Symbol(router view depth)]: [ComputedRefImpl],
        [Symbol(router view location matched)]: [ComputedRefImpl],
        [Symbol(router view location)]: [ComputedRefImpl] },
     ids: [ '0-', 0, 0 ],
     accessCache: [Object: null prototype] {},
     renderCache: [],
     components: null,
     directives: null,
     propsOptions: [ [Object], [Array] ],
     emitsOptions: null,
     emit: [Function: bound emit],
     emitted: null,
     propsDefaults: [Object: null prototype] {},
     inheritAttrs: false,
     ctx: { name: [Getter/Setter], route: [Getter/Setter] },
     data: {},
     props: { route: undefined, name: 'default' },
     attrs: {},
     slots: { default: [Function] },
     refs: {},
     setupState: {},
     setupContext: { attrs: [Getter], slots: [Getter], emit: [Getter], expose: [Function: expose] },
     suspense: null,
     suspenseId: 0,
     asyncDep: null,
     asyncResolved: false,
     isMounted: false,
     isUnmounted: false,
     isDeactivated: false,
     bc: null,
     c: null,
     bm: null,
     m: null,
     bu: null,
     u: null,
     um: null,
     bum: null,
     da: null,
     a: null,
     rtg: null,
     rtc: null,
     ec: null,
     sp: null } } route= { fullPath: '/dashboard',
  hash: '',
  query: {},
  name: 'Dashboard',
  path: '/dashboard',
  params: {},
  matched:
   [ { path: '/dashboard',
       redirect: undefined,
       name: 'Dashboard',
       meta: [Object],
       aliasOf: [Object],
       beforeEnter: undefined,
       props: [Object],
       children: [],
       instances: {},
       leaveGuards: Set(0) {},
       updateGuards: Set(0) {},
       enterCallbacks: {},
       components: [Object] } ],
  meta:
   { name: 'Dashboard', middleware: [ 'protected' ], alias: [ '/dashboard', '/chat' ] },
  redirectedFrom: undefined,
  href: '/dashboard' }  ... >
  at <BaseTransition onAfterLeave= [ [Function: onAfterLeave] ] mode="out-in" appear=false  ... >
  at <Transition onAfterLeave= [ [Function: onAfterLeave] ] name="page" mode="out-in" >
  at <RouterView name=undefined route=undefined >
  at <NuxtPage>
  at <Default ref=Ref< undefined > >
  at <LayoutLoader key="default" layoutProps= { ref:
   RefImpl {
     dep:
      Dep {
        computed: undefined,
        version: 0,
        activeLink: undefined,
        subs: undefined,
        map: undefined,
        key: undefined,
        sc: 0,
        subsHead: undefined },
     __v_isRef: true,
     __v_isShallow: false,
     _rawValue: undefined,
     _value: undefined } } name="default" >
  at <NuxtLayoutProvider layoutProps= { ref:
   RefImpl {
     dep:
      Dep {
        computed: undefined,
        version: 0,
        activeLink: undefined,
        subs: undefined,
        map: undefined,
        key: undefined,
        sc: 0,
        subsHead: undefined },
     __v_isRef: true,
     __v_isShallow: false,
     _rawValue: undefined,
     _value: undefined } } key="default" name="default"  ... >
  at <BaseTransition mode="out-in" appear=false persisted=false  ... >
  at <Transition name="layout" mode="out-in" >
  at <NuxtLayout>
  at <TooltipProvider disableHoverableContent=false disableClosingTrigger=false disabled=false  ... >
  at <TooltipProvider>
  at <ConfigProvider use-id=fn<useSsrSaveId> >
  at <App>
  at <NuxtRoot>

[neneodonkor]

@jonasfroeller I cannot open it because it was Nuxt Core member (antfu) that closed it. I suggest you open another one and make reference to this one.