1# Fallthrough Attributes Overwrite Explicit Attributes in Vue 3
2 
3## Rule
4 
5In Vue 3, fallthrough attributes overwrite explicitly set attributes on the root element (except `class` and `style` which are merged). This is a breaking change from Vue 2. To preserve explicit attribute values, use `inheritAttrs: false` and manually bind `$attrs` before the explicit attribute.
6 
7## Why This Matters
8 
9- Silent behavior change from Vue 2 to Vue 3
10- Can cause unexpected attribute values in migrated codebases
11- Only `class` and `style` merge intelligently; other attributes are overwritten
12- Affects component composition patterns and wrapper components
13 
14## Bad Code
15 
16```vue
17<!-- Parent.vue -->
18<template>
19  <Child msg="Passed from Parent" />
20</template>
21 
22<!-- Child.vue - UNEXPECTED BEHAVIOR -->
23<template>
24  <GrandChild msg="Set in Child" />
25</template>
26 
27<!--
28  Vue 3 Result: GrandChild receives msg="Passed from Parent"
29  The fallthrough attribute OVERWRITES the explicit one!
30 
31  Vue 2 Result: GrandChild receives msg="Set in Child"
32  The explicit attribute took precedence
33-->
34```
35 
36### Another common case with data attributes
37 
38```vue
39<!-- Parent.vue -->
40<template>
41  <Button data-testid="parent-button" />
42</template>
43 
44<!-- Button.vue - WRONG: explicit data-testid is overwritten -->
45<template>
46  <button data-testid="submit-btn">Submit</button>
47</template>
48 
49<!-- Result: <button data-testid="parent-button">Submit</button> -->
50<!-- The component's intended test ID is lost! -->
51```
52 
53## Good Code
54 
55### Option 1: Control attribute order with inheritAttrs: false
56 
57```vue
58<!-- Child.vue - CORRECT: Control attribute precedence -->
59<script setup>
60defineOptions({
61  inheritAttrs: false
62})
63</script>
64 
65<template>
66  <!-- v-bind="$attrs" FIRST, then explicit attribute -->
67  <GrandChild v-bind="$attrs" msg="Set in Child" />
68</template>
69 
70<!--
71  Result: GrandChild receives msg="Set in Child"
72  Explicit attribute overrides fallthrough because it comes last
73-->
74```
75 
76### Option 2: Exclude specific attrs from fallthrough
77 
78```vue
79<script setup>
80import { computed, useAttrs } from 'vue'
81 
82defineOptions({
83  inheritAttrs: false
84})
85 
86const attrs = useAttrs()
87 
88// Filter out attributes you want to control explicitly
89const filteredAttrs = computed(() => {
90  const { msg, ...rest } = attrs
91  return rest
92})
93</script>
94 
95<template>
96  <GrandChild v-bind="filteredAttrs" msg="Set in Child" />
97</template>
98```
99 
100### Option 3: For wrapper components, declare as prop
101 
102```vue
103<!-- Button.vue - BEST: Declare attributes you need to control -->
104<script setup>
105const props = defineProps({
106  dataTestid: {
107    type: String,
108    default: 'submit-btn'
109  }
110})
111 
112defineOptions({
113  inheritAttrs: false
114})
115</script>
116 
117<template>
118  <button :data-testid="dataTestid" v-bind="$attrs">
119    <slot />
120  </button>
121</template>
122```
123 
124## Class and Style Are Special
125 
126Unlike other attributes, `class` and `style` merge rather than overwrite:
127 
128```vue
129<!-- Parent.vue -->
130<template>
131  <Button class="large" style="color: red" />
132</template>
133 
134<!-- Button.vue -->
135<template>
136  <button class="btn" style="padding: 10px">Submit</button>
137</template>
138 
139<!--
140  Result: <button class="btn large" style="padding: 10px; color: red">
141  Both classes and styles are MERGED, not overwritten
142-->
143```
144 
145## Vue 2 to Vue 3 Migration Checklist
146 
147When migrating components that rely on attribute precedence:
148 
1491. Identify components that set explicit attributes on root elements
1502. Check if parent components pass the same attributes
1513. If explicit values should take precedence:
152   - Add `inheritAttrs: false`
153   - Use `v-bind="$attrs"` before explicit attributes
154 
155## References
156 
157- [Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)
158- [Vue 3 Migration Guide - Attribute Coercion Behavior](https://v3-migration.vuejs.org/breaking-changes/)
159- [Vue Fallthrough Attributes behaviour changes from Vue 2 to Vue 3](https://lukes.tips/posts/vue-3-fallthough-attributes-changes/)
160