useAttrs() Access Fallthrough Attributes
Last updated: 2026-10-22
useAttrs() Access Fallthrough Attributes
useAttrs() returns fallthrough attributes not declared as props or emits — for manual forwarding.
| Group | Template & Helpers |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
const attrs = useAttrs()
// template: <div v-bind="attrs"></div>Returns：A reactive object of fallthrough attributes
▶ Example
Edit the code below and see the live result:
Output：
The button carries both classes and the data attribute.💡 Key Points
ℹ️ Note Undeclared attributes land on the root element automatically — use this hook for inner elements.
⚠️ Warning attrs is readonly — mutation warns and does nothing.
💡 Tip Pair with inheritAttrs: false to disable auto-forwarding and distribute precisely.
🏷️ Related Template & Helpers
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Difference from $attrs?
A The composable equivalent of the $attrs instance property.
Q Do attrs update with the parent?
A Values stay current, though deep tracking is limited.
Q When is manual forwarding required?
A Multiple root nodes, or when attributes belong on a specific inner element.
