Search⌘ K
AI Features
Home
Courses
Vue - The Road to Enterprise

Pass Classes Explicitly via Props

Understand the changes in attribute forwarding between Vue 2 and Vue 3, specifically how classes and styles are now included in the $attrs object. Learn to pass classes explicitly via props to maintain consistent styling when migrating your Vue applications.

We'll cover the following...

The ＄attrs object now contains all attributes passed to a component, including class and style.

Vue 2

In Vue 2, v-bind=" ＄attrs" forwards all properties that were passed to a component, but not classes and styles, because these get special treatment and are applied to the component’s root element:

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

When used like this:

HTML
 <InputField id="input-id" class="input-field-class"></InputField>

The InputField component generates this output:

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

Run the following code and look at the attrs forwarding example in Vue 2:

Note: The code below may take a while to run. When the server ...