[Vue.js 3.0] Migration – $attrs includes class & style

# $attrs includes class & style

breaking

# Overview

$attrs now contains all attributes passed to a component, including class and style.

# 2.x Behavior

class and style attributes get some special handling in the Vue 2 virtual DOM implementation. For that reason, they are not included in $attrs, while all other attributes are.

A side effect of this manifests when using inheritAttrs: false:

• Attributes in $attrs are no longer automatically added to the root element, leaving it to the developer to decide where to add them.
• But class and style, not being part of $attrs, will still be applied to the component's root element:

<template>
<label>
<input type="text" v-bind="$attrs" />
</label>
</template>
<script>
export default {
inheritAttrs: false
}
</script>

when used like this:

<my-component id="my-id" class="my-class"></my-component>

...will generate this HTML:

<label class="my-class">
<input type="text" id="my-id" />
</label>

# 3.x Behavior

$attrs contains all attributes, which makes it easier to apply all of them to a different element. The example from above now generates the following HTML:

<label>
<input type="text" id="my-id" class="my-class" />
</label>

# Migration Strategy

In components that use inheritAttrs: false, make sure that styling still works as intended. If you previously relied on the special behavior of class and style, some visuals might be broken as these attributes might now be applied to another element.

# See also

• Relevant RFC(opens new window)
• Migration guide - $listeners removed
• Migration guide - New Emits Option
• Migration guide - .native modifier removed
• Migration guide - Changes in the Render Functions API