[Vue warn]: Extraneous non-props attributes Vue Origin: On your device OSI layer 7 · Application Last updated 5 Nov 2026

Vue: [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

Attributes (class, style, listeners) passed to a component can't be applied because the component has multiple root nodes.

Exact message you may see [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.Extraneous non-props attributes were passed to component but could not be automatically inherited[Vue warn]: Extraneous non-props attributes (style)Extraneous non-props attributes
Explore the map of this error Full error map →
Seen on: Vue

Meaning

Vue applies fallthrough attrs to a single root element. With multiple roots or a fragment, bind them manually: <div v-bind="$attrs"> or inheritAttrs: false with explicit placement. Wrap in a single root if simple.

Common causes

  • Component template with multiple root elements
  • Fragment/text root
  • inheritAttrs: false without binding $attrs
  • Teleport/transition root
  • Passing class/style to a multi-root component

⚡ Quick fix

  1. Wrap the template in one root element
  2. Use v-bind="$attrs" on the intended element
  3. Declare props/emits explicitly

Detailed fix by platform

Vue

  1. <script setup>defineOptions({ inheritAttrs: false })</script><template><div class="wrap"><input v-bind="$attrs"></div></template>

How to diagnose

  1. Roots — Single?
  2. attrs — Bound?
  3. inheritAttrs — Set?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

[Vue warn]: <TransitionGroup> children must be keyed — Vue: [Vue warn]: <TransitionGroup> children must be keyed: <li> (Vue)[Vue warn]: <Transiti…[Vue warn]: Component emitted event but it is neither declared in the emits option nor as an onXxx prop — Vue: [Vue warn]: Component emitted event "update" but it is neither declared in the emits option nor as an "onUpdate" prop (Vue)[Vue warn]: Component…[Vue warn]: injection "x" not found — Vue: [Vue warn]: injection "theme" not found. (Vue)[Vue warn]: injection…[Vue warn]: Invalid prop: type check failed — Vue: [Vue warn]: Invalid prop: type check failed for prop "count". Expected Number with value 5, got String with value "5" (Vue)[Vue warn]: Invalid p…[Vue warn]: Missing required prop — Vue: [Vue warn]: Missing required prop: "title" (Vue)[Vue warn]: Missing r…Avoid mutating a prop directly — Vue: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders (Vue)Avoid mutating a prop…ESLint Parsing error in .vue files — ESLint: Parsing error: Unexpected token < / Parsing error: '>' expected (vue-eslint-parser not configured) (Vue)ESLint Parsing error …Vite: Failed to parse source / Unknown file extension ".vue" — Vite/Vue: [plugin:vite:import-analysis] Failed to parse source for import analysis — you may need to install appropriate plugins to handle the .vue file format (Vue)Vite: Failed to parse…[Vue warn…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.