Vue.js 31 🟢 Component Fallthrough Attributes ($attrs) and inheritAttrs: false - KandZ

A component’s root element receives the attributes that the parent passes to the component but that the component does not declare as props. This is attribute fallthrough, and it is the default behavior in Vue 3. A parent writes <MyButton class="btn" id="submit" @click="handleClick" />, and the class, the id, and the @click listener are all applied to the component’s root element, even though the component declares none of them as props. The behavior is automatic, and it is what makes a wrapper component transparent: the parent styles and the listeners reach the element that actually renders, without the wrapper’s author having to forward each one manually.

The mechanism is the $attrs object. It is the collection of the fallthrough attributes, and it is available in the template as $attrs and in the script as the attrs property of the setup context. A component that declares a class prop, or any other prop, removes that attribute from the fallthrough set. The $attrs object contains what is left. The object is reactive: when the parent passes a new attribute, the $attrs updates, and the fallthrough behavior applies the new attribute to the root element .

The default behavior is not always what is wanted. A component with multiple root elements — a fragment — cannot have an automatic fallthrough, because there is no single root to attach the attributes to. Vue warns in this case, and the developer must decide where the attributes go. A component whose root is another component, or whose root is a wrapper element that should not receive the attributes, needs to control the fallthrough explicitly. The inheritAttrs: false option disables the automatic fallthrough, and the v-bind="$attrs" directive applies the attributes to the element the developer chooses. This is the pattern for a component that forwards the attributes to an inner element, or splits them across multiple elements.

This chapter covers three areas. First, why attribute fallthrough exists — the transparency problem and the $attrs object. Second, how the fallthrough works — the default behavior, the class and style merging, the event listener merging, and the multiple-root warning. Third, how to control the fallthrough — the inheritAttrs: false option, the v-bind="$attrs" directive, the useAttrs() composable, and the patterns for forwarding the attributes to the inner elements. The chapter ends with a complete example session, a quick reference, best practices, common pitfalls, real-world examples, and diagrams showing the fallthrough flow.

Key point: Attribute fallthrough applies the parent’s undeclared attributes to the component’s root element. The $attrs object contains the fallthrough attributes, and it is available in the template and the script. The inheritAttrs: false option disables the automatic fallthrough, and the v-bind="$attrs" directive applies the attributes to the element the developer chooses. The class and style attributes are merged, and the event listeners are combined.

Why attribute fallthrough exists

The transparency problem. A component is a wrapper around an element. The parent that uses the component often needs to pass the attributes that the wrapper does not know about: a class for the styling, an id for the accessibility, a data-* attribute for the testing, and the event listeners for the interaction. Without the fallthrough, the wrapper’s author would have to declare every attribute as a prop and forward it manually. The fallthrough makes the wrapper transparent: the attributes the wrapper does not declare are applied to the root element, and the parent’s intent reaches the DOM.

The $attrs problem. The $attrs object is the collection of the fallthrough attributes. It is the mechanism that makes the fallthrough explicit. The developer can inspect it, apply it to a specific element, or pass it to a child component. The object is available in the template as $attrs and in the script as the attrs property of the setup context. It is reactive: the parent’s new attributes are reflected in the object, and the fallthrough behavior applies them.

The disabling problem. The automatic fallthrough is a default, and the default is not always right. A component with multiple root elements cannot have an automatic fallthrough. A component that wraps another component may want the attributes to reach the inner component, not the outer wrapper. A component that has a root element with its own class may want to control the merge. The inheritAttrs: false option disables the automatic fallthrough, and the developer applies the $attrs to the chosen element.

The merging problem. The class and style attributes are not replaced by the fallthrough; they are merged. A component with class="btn" on its root element and a parent that passes class="large" produces an element with both btn and large. The event listeners are combined: a component with an @click handler on its root and a parent that passes @click produces an element with both handlers, and both are called. The merge behavior is what makes the fallthrough composable.

The multiple-root problem. A component with multiple root elements cannot have an automatic fallthrough, because there is no single element to attach the attributes to. Vue warns in this case, and the developer must apply the $attrs explicitly. The v-bind="$attrs" on one of the roots, or on a specific element, is the fix. The multiple-root case is the most common reason to use inheritAttrs: false.

The trade-off. The automatic fallthrough is convenient, but it is implicit. A component that receives attributes it does not expect applies them to the root, which can produce unexpected styles or behaviors. The explicit inheritAttrs: false and v-bind="$attrs" is more verbose, but it makes the attribute routing visible. The trade-off is between the convenience of the default and the explicitness of the manual control.

a. The default fallthrough

A component with a single root element receives the parent’s undeclared attributes automatically.

<!-- MyButton.vue -->
<script setup>
defineProps({
  type: {
    type: String,
    default: 'button',
  },
});
</script>

<template>
  <button :type="type" class="btn">
    <slot />
  </button>
</template>

The parent uses the component and passes the class, the id, and the @click:

<template>
  <MyButton class="btn-primary" id="submit" @click="handleClick">
    Submit
  </MyButton>
</template>

The rendered HTML has the attributes on the <button>:

<button type="button" class="btn btn-primary" id="submit">Submit</button>

The class values are merged: the component’s btn and the parent’s btn-primary. The id and the @click are applied to the root. The type prop is not in the $attrs, because the component declared it.

The class merging. The class attribute is merged. The component’s class is combined with the parent’s class, and the parent’s class comes after. The order is the parent’s class first in the rendering, but the merge is what matters: both are present.

The style merging. The style attribute is merged the same way. The component’s inline styles and the parent’s inline styles are combined. If a property is present in both, the parent’s value wins.

The event listener merging. The event listeners are combined. The component’s @click on the root and the parent’s @click on the component both fire. The component’s handler is called first, then the parent’s.

The multiple-root warning. A component with multiple root elements cannot have an automatic fallthrough. Vue emits a warning, and the developer must apply the $attrs explicitly.

<!-- ❌ This produces a warning -->
<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>

The fix is the inheritAttrs: false and the v-bind="$attrs" on the chosen element.

b. The `inheritAttrs: false` option

The inheritAttrs: false option disables the automatic fallthrough. The $attrs object is still available, but the attributes are not applied automatically.

<script setup>
defineOptions({
  inheritAttrs: false,
});
</script>

<template>
  <div class="wrapper">
    <input v-bind="$attrs" />
  </div>
</template>

The defineOptions macro sets the inheritAttrs option in the <script setup>. The v-bind="$attrs" applies the fallthrough attributes to the <input> element. The wrapper <div> does not receive the attributes. This is the pattern for a component that forwards the attributes to an inner element.

In the Options API, the option is set directly:

export default {
  inheritAttrs: false,
  // ...
};

The multiple v-bind="$attrs" problem. The v-bind="$attrs" applies all the attributes to one element. If the developer wants to split the attributes across multiple elements, the v-bind with a computed property is the pattern.

<script setup>
import { computed, useAttrs } from 'vue';

const attrs = useAttrs();

const inputAttrs = computed(() => ({
  type: attrs.type,
  placeholder: attrs.placeholder,
}));

const wrapperAttrs = computed(() => ({
  class: attrs.class,
}));
</script>

<template>
  <div v-bind="wrapperAttrs">
    <input v-bind="inputAttrs" />
  </div>
</template>

The useAttrs() composable returns the $attrs object in the script. The computed properties select the attributes for the input and the wrapper. The attrs object is reactive, so the computed properties update when the parent passes a new attribute.

The onClick and the event listeners. The event listeners are in the $attrs object with the on prefix. The onClick is the @click listener. The v-bind="$attrs" applies the listeners to the element, and the v-bind on a custom component forwards them to the component’s $attrs.

<script setup>
import { useAttrs } from 'vue';

const attrs = useAttrs();
</script>

<template>
  <button v-bind="attrs">Click</button>
</template>

The attrs.onClick is the click listener, and the v-bind applies it to the <button>. The click event is handled by the parent’s listener.

c. The `useAttrs()` composable

The useAttrs() composable returns the $attrs object in the <script setup>. It is the script equivalent of the $attrs template variable.

<script setup>
import { useAttrs } from 'vue';

const attrs = useAttrs();

// attrs.class, attrs.id, attrs.onClick, ...
</script>

The returned object is the same as the $attrs template variable. It is not reactive in the sense that it does not have a .value, but it is updated when the parent passes a new attribute. The object is not a ref, so it is not unwrapped in the template, but the properties are accessible directly.

The composable is useful when the attributes need to be inspected or filtered in the script:

<script setup>
import { computed, useAttrs } from 'vue';

const attrs = useAttrs();

const hasId = computed(() => 'id' in attrs);
const inputAttrs = computed(() => {
  const { class: _, ...rest } = attrs;
  return rest;
});
</script>

The attrs object can be destructured, and the properties can be used in the computed values. The class is excluded from the inputAttrs and applied to the wrapper instead.

The attrs and the props difference. The props are the declared properties, and the attrs are the undeclared ones. A prop is declared with defineProps, and it is removed from the $attrs. The attrs object contains what is left: the class, the style, the id, the data-*, and the event listeners that the component did not declare.

Complete Example Session

<!-- ============================================
     PART 1: THE BASIC COMPONENT
     ============================================ -->

<!-- MyButton.vue -->
<script setup>
defineProps({
  type: {
    type: String,
    default: 'button',
  },
});
</script>

<template>
  <button :type="type" class="btn">
    <slot />
  </button>
</template>


<!-- ============================================
     PART 2: THE PARENT USING THE COMPONENT
     ============================================ -->

<!-- Parent.vue -->
<script setup>
import MyButton from './MyButton.vue';

function handleClick() {
  console.log('clicked');
}
</script>

<template>
  <MyButton
    class="btn-primary"
    id="submit"
    data-testid="submit-btn"
    @click="handleClick"
  >
    Submit
  </MyButton>
</template>

<!-- The rendered HTML:
     <button type="button" class="btn btn-primary"
             id="submit" data-testid="submit-btn">
       Submit
     </button> -->


<!-- ============================================
     PART 3: THE CLASS MERGING
     ============================================ -->

<!-- The component's class and the parent's class are merged. -->
<!-- The result: class="btn btn-primary" -->


<!-- ============================================
     PART 4: THE EVENT LISTENER MERGING
     ============================================ -->

<!-- MyButton.vue with its own handler -->
<script setup>
function handleClick() {
  console.log('component clicked');
}
</script>

<template>
  <button @click="handleClick" class="btn">
    <slot />
  </button>
</template>

<!-- The parent's @click and the component's @click both fire. -->
<!-- The component's handler is called first. -->


<!-- ============================================
     PART 5: THE MULTIPLE-ROOT WARNING
     ============================================ -->

<!-- ❌ This produces a warning -->
<template>
  <header>...</header>
  <main>...</main>
</template>

<!-- The warning:
     "Extraneous non-props attributes were passed to component
      but could not be automatically inherited because the
      component renders fragment or text root nodes." -->


<!-- ============================================
     PART 6: THE FIX WITH inheritAttrs
     ============================================ -->

<script setup>
defineOptions({
  inheritAttrs: false,
});
</script>

<template>
  <header v-bind="$attrs">...</header>
  <main>...</main>
</template>

<!-- The attributes are applied to the <header>. -->
<!-- No warning. -->


<!-- ============================================
     PART 7: THE INNER ELEMENT FORWARDING
     ============================================ -->

<!-- CustomInput.vue -->
<script setup>
defineOptions({
  inheritAttrs: false,
});

defineProps({
  label: String,
});
</script>

<template>
  <label>
    {{ label }}
    <input v-bind="$attrs" />
  </label>
</template>

<!-- The parent's class, id, and listeners go to the <input>,
     not the <label>. -->


<!-- ============================================
     PART 8: THE useAttrs COMPOSABLE
     ============================================ -->

<script setup>
import { computed, useAttrs } from 'vue';

const attrs = useAttrs();

const inputAttrs = computed(() => ({
  type: attrs.type,
  placeholder: attrs.placeholder,
}));

const wrapperAttrs = computed(() => ({
  class: attrs.class,
}));
</script>

<template>
  <div v-bind="wrapperAttrs">
    <input v-bind="inputAttrs" />
  </div>
</template>


<!-- ============================================
     PART 9: THE SPLITTING PATTERN
     ============================================ -->

<script setup>
import { computed, useAttrs } from 'vue';

defineOptions({
  inheritAttrs: false,
});

const attrs = useAttrs();

const { class: className, ...restAttrs } = attrs;

const wrapperAttrs = computed(() => ({ class: className }));
const inputAttrs = computed(() => restAttrs);
</script>

<template>
  <div v-bind="wrapperAttrs">
    <input v-bind="inputAttrs" />
  </div>
</template>


<!-- ============================================
     PART 10: THE COMPLETE COMPONENT
     ============================================ -->

<!-- FormField.vue -->
<script setup>
import { computed, useAttrs } from 'vue';

defineOptions({
  inheritAttrs: false,
});

defineProps({
  label: {
    type: String,
    required: true,
  },
  error: {
    type: String,
    default: null,
  },
});

const attrs = useAttrs();

const inputAttrs = computed(() => attrs);
</script>

<template>
  <div class="form-field">
    <label class="form-field__label">{{ label }}</label>
    <input
      v-bind="inputAttrs"
      class="form-field__input"
      :class="{ 'form-field__input--error': error }"
    />
    <p v-if="error" class="form-field__error">{{ error }}</p>
  </div>
</template>

<!-- The parent's attributes go to the <input>.
     The class is merged with the component's classes.
     The error styling is applied conditionally. -->

The ten parts show the basic component, the parent using the component, the class merging, the event listener merging, the multiple-root warning, the fix with inheritAttrs, the inner element forwarding, the useAttrs composable, the splitting pattern, and the complete component.

Quick Reference

The Fallthrough Defaults

Attribute	Behavior
`class`	Merged
`style`	Merged
`id`	Applied
`data-*`	Applied
`@click`	Combined (both fire)
Declared props	Removed from `$attrs`

The `$attrs` Object

Access	Where
`$attrs`	The template
`attrs` (setup context)	The `setup()` function
`useAttrs()`	The `<script setup>`

The Options

Option	Effect
`inheritAttrs: true`	The default; automatic fallthrough
`inheritAttrs: false`	Disable the automatic fallthrough
`defineOptions({ inheritAttrs: false })`	Set it in the `<script setup>`

The Apply Patterns

Pattern	Result
`v-bind="$attrs"`	Apply all the attributes to one element
`v-bind="computedAttrs"`	Apply a subset
`const { class: c, ...rest } = attrs`	Split the attributes

The Multiple-Root Warning

Situation	Fix
The fragment root	`inheritAttrs: false` + `v-bind="$attrs"`
The inner component	`v-bind="$attrs"` on the inner component
The split attributes	`useAttrs()` + the computed properties

Best Practices

✅ Do This:

<script setup>
// Disable the fallthrough when the root is not the target
defineOptions({ inheritAttrs: false });                                   // ✅
// Apply the attrs to the inner element
<input v-bind="$attrs" />                                                 // ✅
// Use useAttrs for the script access
const attrs = useAttrs();                                                 // ✅
// Merge the class explicitly when the component has its own
<input v-bind="$attrs" class="form-input" />                              // ✅
// Split the attributes with the computed properties
const inputAttrs = computed(() => ({ type: attrs.type }));                // ✅
</script>

❌ Don’t Do This:

<script setup>
// Don't leave the automatic fallthrough when the root is a fragment
// (produces a warning)                                                    // ❌
// Don't use inheritAttrs: false without applying the $attrs
defineOptions({ inheritAttrs: false }); // the attrs are lost              // ❌
// Don't use v-bind="$attrs" on multiple elements
<header v-bind="$attrs" /><main v-bind="$attrs" /> // duplicated          // ❌
// Don't declare the class as a prop
defineProps({ class: String }); // use the fallthrough instead             // ❌
// Don't forget that the event listeners are in the attrs
const { onClick } = attrs; // it is there                                  // ✅
</script>

Common Pitfalls

Pitfall	Why It Happens	Fix
The multiple-root warning	The fragment root	`inheritAttrs: false` + `v-bind="$attrs"`
The attributes on the wrong element	The wrapper receives them	`inheritAttrs: false`
The class not merged	The component replaces it	The class is merged by default
The event fires twice	Both the component and the parent have handlers	This is the expected behavior
The attrs lost	`inheritAttrs: false` without `v-bind`	Apply the `$attrs`
The attrs not reactive	Destructured at the setup	Use the computed or the `attrs` object
The `onClick` not found	The event listeners are in the attrs	Check the `on` prefix

Real-World Examples

1. The Basic Fallthrough

<button class="btn"><slot /></button>

2. The Parent Passing the Class

<MyButton class="btn-primary">Submit</MyButton>

3. The `inheritAttrs: false`

<script setup>
defineOptions({ inheritAttrs: false });
</script>

4. The `v-bind="$attrs"`

<input v-bind="$attrs" />

5. The `useAttrs()`

const attrs = useAttrs();

6. The Split Attributes

const { class: c, ...rest } = attrs;

7. The Multiple-Root Fix

<template>
  <header v-bind="$attrs">...</header>
  <main>...</main>
</template>

8. The Inner Component Forwarding

<InnerComponent v-bind="$attrs" />

9. The Explicit Class Merge

<input v-bind="$attrs" class="form-input" />

10. The Complete Form Field

<input v-bind="attrs" class="form-field__input" :class="{ '--error': error }" />

Visual

The Fallthrough Flow

┌──────────────────────────────────────────────────────────────┐
│  THE FALLTHROUGH FLOW                                        │
│                                                              │
│  Parent:                                                     │
│  ┌──────────────────────────────────────────────────────┐    │
│  │  <MyButton class="btn-primary" id="submit"           │    │
│  │           @click="handleClick">                      │    │
│  └──────────────────────────────────────────────────────┘    │
│    │                                                         │
│    │  The class, id, and @click are not declared props.      │
│    ▼                                                         │
│  MyButton:                                                   │
│  ┌──────────────────────────────────────────────────────┐    │
│  │  defineProps({ type: String })                       │    │
│  │    → type is removed from the $attrs                 │    │
│  │                                                       │    │
│  │  $attrs = { class, id, onClick }                     │    │
│  └──────────────────────────────────────────────────────┘    │
│    │                                                         │
│    │  The automatic fallthrough applies the $attrs.          │
│    ▼                                                         │
│  The root element:                                           │
│  ┌──────────────────────────────────────────────────────┐    │
│  │  <button type="button" class="btn btn-primary"       │    │
│  │          id="submit">                                │    │
│  │                                                       │    │
│  │  The class is merged: "btn" + "btn-primary".         │    │
│  │  The id is applied.                                  │    │
│  │  The @click is combined with the component's.        │    │
│  └──────────────────────────────────────────────────────┘    │
│                                                              │
└──────────────────────────────────────────────────────────────┘

The `inheritAttrs: false` Pattern

┌──────────────────────────────────────────────────────────────┐
│  THE inheritAttrs: false PATTERN                             │
│                                                              │
│  WITHOUT inheritAttrs: false:                                │
│  ┌──────────────────────────────────────────────────────┐    │
│  │  <div class="wrapper">                               │    │
│  │    <input />                                         │    │
│  │  </div>                                              │    │
│  │                                                       │    │
│  │  The parent's attributes go to the <div>.            │    │
│  │  The <input> does not receive them.                  │    │
│  └──────────────────────────────────────────────────────┘    │
│                                                              │
│  WITH inheritAttrs: false:                                   │
│  ┌──────────────────────────────────────────────────────┐    │
│  │  <script setup>                                      │    │
│  │  defineOptions({ inheritAttrs: false });             │    │
│  │  </script>                                           │    │
│  │                                                       │    │
│  │  <template>                                          │    │
│  │    <div class="wrapper">                             │    │
│  │      <input v-bind="$attrs" />                       │    │
│  │    </div>                                            │    │
│  │  </template>                                         │    │
│  │                                                       │    │
│  │  The parent's attributes go to the <input>.          │    │
│  │  The <div> does not receive them.                    │    │
│  └──────────────────────────────────────────────────────┘    │
│                                                              │
└──────────────────────────────────────────────────────────────┘

The Multiple-Root Warning

┌──────────────────────────────────────────────────────────────┐
│  THE MULTIPLE-ROOT WARNING                                   │
│                                                              │
│  ❌ The fragment root:                                        │
│  ┌──────────────────────────────────────────────────────┐    │
│  │  <template>                                          │    │
│  │    <header>...</header>                              │    │
│  │    <main>...</main>                                  │    │
│  │    <footer>...</footer>                              │    │
│  │  </template>                                         │    │
│  │                                                       │    │
│  │  Warning: "Extraneous non-props attributes were      │    │
│  │  passed to component but could not be automatically  │    │
│  │  inherited because the component renders fragment    │    │
│  │  or text root nodes."                                │    │
│  └──────────────────────────────────────────────────────┘    │
│                                                              │
│  ✅ The fix:                                                  │
│  ┌──────────────────────────────────────────────────────┐    │
│  │  <script setup>                                      │    │
│  │  defineOptions({ inheritAttrs: false });             │    │
│  │  </script>                                           │    │
│  │                                                       │    │
│  │  <template>                                          │    │
│  │    <header v-bind="$attrs">...</header>              │    │
│  │    <main>...</main>                                  │    │
│  │    <footer>...</footer>                              │    │
│  │  </template>                                         │    │
│  │                                                       │    │
│  │  The attributes are applied to the <header>.         │    │
│  │  No warning.                                         │    │
│  └──────────────────────────────────────────────────────┘    │
│                                                              │
└──────────────────────────────────────────────────────────────┘

The Split Attributes

┌──────────────────────────────────────────────────────────────┐
│  THE SPLIT ATTRIBUTES                                        │
│                                                              │
│  const attrs = useAttrs();                                   │
│                                                              │
│  const inputAttrs = computed(() => ({                        │
│    type: attrs.type,                                         │
│    placeholder: attrs.placeholder,                           │
│  }));                                                        │
│                                                              │
│  const wrapperAttrs = computed(() => ({                      │
│    class: attrs.class,                                       │
│  }));                                                        │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐    │
│  │  <div v-bind="wrapperAttrs">                         │    │
│  │    <input v-bind="inputAttrs" />                     │    │
│  │  </div>                                              │    │
│  └──────────────────────────────────────────────────────┘    │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐    │
│  │  The class goes to the <div>.                        │    │
│  │  The type and placeholder go to the <input>.         │    │
│  │                                                       │    │
│  │  The attrs object is reactive.                       │    │
│  │  The computed properties update when the parent      │    │
│  │  passes a new attribute.                             │    │
│  └──────────────────────────────────────────────────────┘    │
│                                                              │
└──────────────────────────────────────────────────────────────┘

Summary

Item	Value
Fallthrough	The undeclared attributes go to the root element
`$attrs`	The collection of the fallthrough attributes
`useAttrs()`	The script access to the `$attrs`
`inheritAttrs: false`	Disable the automatic fallthrough
`v-bind="$attrs"`	Apply the attributes to the chosen element
`class` merging	The component’s and the parent’s classes are combined
`style` merging	The inline styles are merged
Event listeners	Combined; both fire
Multiple roots	The warning; the fix is `inheritAttrs: false`

Key takeaways:

Attribute fallthrough applies the parent’s undeclared attributes to the component’s root element. A parent that passes class, id, data-*, or @click to a component sees them applied to the root, even though the component declares none of them as props .
The $attrs object contains the fallthrough attributes. It is available in the template as $attrs and in the script as the useAttrs() composable. The object is reactive, and the declared props are removed from it .
The class and style attributes are merged, not replaced. A component with class="btn" and a parent with class="btn-primary" produces class="btn btn-primary". The event listeners are combined, and both fire .
The inheritAttrs: false option disables the automatic fallthrough. The $attrs is still available, but the developer must apply it explicitly. The v-bind="$attrs" directive applies the attributes to the chosen element .
The multiple-root component cannot have an automatic fallthrough. Vue warns, and the fix is the inheritAttrs: false and the v-bind="$attrs" on the chosen root. The useAttrs() composable allows the attributes to be split across multiple elements .
The useAttrs() composable returns the $attrs object in the script. The object can be inspected, filtered, and applied to the different elements. The computed properties can select the subsets of the attributes for each element .
The fallthrough is the mechanism that makes a wrapper component transparent. The parent’s styling, accessibility attributes, and event listeners reach the element that renders, without the wrapper’s author forwarding each one manually.
The event listeners in the $attrs have the on prefix. The @click is the attrs.onClick, and the v-bind="$attrs" applies it to the element. The component’s own listener and the parent’s listener both fire.

Remember: Attribute fallthrough is the default behavior that applies the parent’s undeclared attributes to the component’s root element. The $attrs object contains the fallthrough attributes, and it is available in the template and the script. The class and style attributes are merged, and the event listeners are combined. The inheritAttrs: false option disables the automatic fallthrough, and the v-bind="$attrs" directive applies the attributes to the chosen element. The useAttrs() composable allows the attributes to be inspected and split in the script. The result is a component that is transparent by default and controllable when the default is not right.

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!

Why attribute fallthrough exists

a. The default fallthrough

b. The inheritAttrs: false option

c. The useAttrs() composable

Complete Example Session

Quick Reference

The Fallthrough Defaults

The $attrs Object

The Options

The Apply Patterns

The Multiple-Root Warning

Best Practices

Common Pitfalls

Real-World Examples

1. The Basic Fallthrough

2. The Parent Passing the Class

3. The inheritAttrs: false

4. The v-bind="$attrs"

5. The useAttrs()

6. The Split Attributes

7. The Multiple-Root Fix

8. The Inner Component Forwarding

9. The Explicit Class Merge

10. The Complete Form Field

Visual

The Fallthrough Flow

The inheritAttrs: false Pattern

The Multiple-Root Warning

The Split Attributes

Summary

b. The `inheritAttrs: false` option

c. The `useAttrs()` composable

The `$attrs` Object

3. The `inheritAttrs: false`

4. The `v-bind="$attrs"`

5. The `useAttrs()`

The `inheritAttrs: false` Pattern