Warning in browser console: Extraneous non-props attributes (...) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

[akauppi]

The full text is:

[Vue warn]: Extraneous non-props attributes (data-v-7ac74a55) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

What causes these? Cannot figure out, based on the warning text.

Vue.js 3.0.0-rc.8

[akauppi]

These seem to be gone (Vue.js 3.0.0-rc.12). Maybe some update did it.

[nomadboy20]

Same problem in vue 3.0.5

[lsy-effort]

I have met the same warning. The reason may be that you have more than one root node in the component template. Refer to https://v3.vuejs.org/guide/component-attrs.html#attribute-inheritance-on-multiple-root-nodes. To solve this, I contain all my elements in a container element and it works. Disabling Attribute Inheritance may also work, but I have not tried this.

[resellore]

This warning can be resolve by writing "inheritAttrs: false," in export default defineComponent({})(Chinese English, haha!)

[bhojkamal]

I got same type of error/warning on console. ->

[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be 
automatically inherited because component renders fragment or text root nodes. 
  at <Users class="dash-ht" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView class="dash-ht" > at <App>

On App.vue I have done

<router-view class="dash-ht"></router-view> <style> .dash-ht{min-height: 80vh; </style>

The reason for this warning is due to I've added css class to router-view. What is the solution for this? It does not come in every page. Just in few page.

[wsw70]

@lsy-effort To solve this, I contain all my elements in a container element and it works

Thank you for this.

I always have a <div> encompassing all the elements in the template, except this single time where I used a <div v-if=...> and <div v-else=...>. I thought that there would be just one of the two (and therefore play the role of the "overall encompassing div") but despite not being there (there is just <!--v-if-->) it is still not happy.

Adding an extra div around the v-if/v-else fixed the problem.

[Volmarg]

In my case I had component and passed prop called label. That was the problem - changed to labelText and works.

Seems like vue prevents props from being defined with names reserved for non-prop attributes

[GIS90]

This warning can be resolve by writing "inheritAttrs: false," in export default defineComponent({})(Chinese English, haha!)

我在 export default 定义的组件上加了inheritAttrs: false,还是没解决，方便留个email沟通吗

[kissu]

I got this issue while using Vitesse, as stated in the mention just above it happens if the page and component names are the same. 🔝

[wovosoft]

You might have multiple root components. In this case specify where to use attributes.

<template>
        <div v-bind="$attrs">one</div>
        <div>two</div>
</template>

[kissu]

@wovosoft nope, I do not. Otherwise I would not have posted my message since it's already discussed above. 😄

[akauppi]

While you’re welcome to discuss the issue here, making/finding a StackOverflow issue about it might be a more regarding option.

This issue will get closed once/if I can resolve the problem in the scope of the GroundLevel template.

[kissu]

I'm posting it here because it's still one of the first result when making a search on Brave Search.

[akauppi]

Closing, since I haven't seen this with GroundLevel.

If someone finds this occurring with GroundLevel, I'll be happy to reopen.

[onurusluca]

This also happens with route queries. Happened with Vue 3 (v3.2.41). Solution is the same with what other said. Have only one component (like div or section) between template tags.

No error:

<template>
      <div
        ...
      </div>
</template>

Error:

<template>
      <div
        ...
      </div>
      <div
        ...
      </div>
</template>

[oxavibes]

You might have multiple root components. In this case specify where to use attributes.

<template>
        <div v-bind="$attrs">one</div>
        <div>two</div>
</template>

I did the same too, I explicitly defined who should inherit the attributes but I still getting the warning

[dariuxmx]

Use fragment to avoid the Fallthrough Attributes warning, you should have only one root component.

Here is a link from vue documentation https://vuejs.org/guide/components/attrs.html

<template>
   <div> <!-- Root -->
        <button type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden" @click="sidebarOpen = true">
          <span class="sr-only">Open sidebar</span>
          <Bars3Icon class="h-6 w-6" aria-hidden="true" />
        </button>
        <button type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden" @click="sidebarOpen = true">
          <span class="sr-only">Open sidebar</span>
          <Bars3Icon class="h-6 w-6" aria-hidden="true" />
        </button>
   </div> <!-- Close Root -->
</template>

[MarceloCAlthmann]

I had the same problem. In my case, i wrote the template the wrong way. I left tag < label> before main div. like < template> < label xxxxxx > < div> < /div> < /template>

after fixed the message disapear.

[romiardisaja]

Got same problem, and resolve by add id="lesson" attribute to <select> element:

Got vue warn: <select @change="handleOnSelectChange" class="form-select" v-model="form.lesson_id" > <option v-for="(lesson, index) in lessons" :key="index" :value="lesson.id">{{ lesson.title }}</option> </select>

vs

Vue warn has gone: <select id="lesson" @change="handleOnSelectChange" class="form-select" v-model="form.lesson_id" > <option v-for="(lesson, index) in lessons" :key="index" :value="lesson.id">{{ lesson.title }}</option> </select>

[fabus961]

In my case it's because I am passing a class (from parent) to a component. Just remove it from component usage and u're fine - or define the prop in your component to have it properly accepted I guess.

This vue will style, but grumble in your dev console.

<MyCustomComponent class="myclass"... />

Either use the class inside the component

// ./MyCustomComponent.vue

<template>
  <div class="myclass">
     ...
  </div>
</template>

Or explicitly define it in the child if you wanna pass it down dynamically or whatever reason you have :)

// ./MyCustomComponent.vue
<script>
const props = defineProps({
  class: String | Array | Object
});
</script>