runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: Extraneous non-props attributes (title) were passed to ponent but could not be automatically inherited because ponent renders fragment or text root nodes. 
  at <ProductTable title="Product List" > 
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App> 

This is the error I get in the chrome console of my Vue app. Below is my parent view ponent. I am trying to add multiple ponents to it, e.g home content and footer.

<template>
  <div class="home">
    <ProductTable title="Product List"/>
    <Footer title="I am the child"/>
  </div>
</template>

<script>
import ProductTable from '@/ponents/ProductTable.vue'
import Footer from '@/ponents/Footer.vue'
import Functions from '@/ponents/ProductListFunctions.js'


export default {
  name: 'Home',
  ponents: {
    ProductTable,
    Footer
  }
}
</script>

Any help is appreciated as I cant figure it out. The error is just a warning and doesn't effect any of the page. But it would be nice to be gone. Cheers.

runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: Extraneous non-props attributes (title) were passed to ponent but could not be automatically inherited because ponent renders fragment or text root nodes. 
  at <ProductTable title="Product List" > 
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App> 

This is the error I get in the chrome console of my Vue app. Below is my parent view ponent. I am trying to add multiple ponents to it, e.g home content and footer.

<template>
  <div class="home">
    <ProductTable title="Product List"/>
    <Footer title="I am the child"/>
  </div>
</template>

<script>
import ProductTable from '@/ponents/ProductTable.vue'
import Footer from '@/ponents/Footer.vue'
import Functions from '@/ponents/ProductListFunctions.js'


export default {
  name: 'Home',
  ponents: {
    ProductTable,
    Footer
  }
}
</script>

Any help is appreciated as I cant figure it out. The error is just a warning and doesn't effect any of the page. But it would be nice to be gone. Cheers.

• javascript
• vue.js
• vue-ponent

Share Improve this question Follow asked May 15, 2022 at 9:09 TestnominieeTestnominiee 6122 silver badges99 bronze badges 2

• Please share one of that ponents – Boussadjra Brahim Commented May 15, 2022 at 9:13
• title is an existing attribute; if you need this as prop, rename it. – user5734311 Commented May 15, 2022 at 9:16

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You should add inheritAttrs:false to the child ponents:

export default{
inheritAttrs:false
...
}