Currently, I am in the process of wrapping various Vuetify components into a custom component to gain better control over the application's appearance and behavior. However, I have encountered an issue where default props for the Vuetify component work well, but when additional props are added during consumption of the component, these override props are not being utilized.
Using Vue 3.2.38 and Vuetify 3.1.10.
Custom Component:
<template>
<label v-if="name">{{ name }}</label>
<v-text-field v-bind="{ ...$attrs, ...$props, ...defaultProps }">
<template v-for="(_, scopedSlotName) in $slots" #[scopedSlotName]="slotData">
<slot :name="scopedSlotName" v-bind="slotData" />
</template>
<template v-for="(_, slotName) in $slots" #[slotName]>
<slot :name="slotName" />
</template>
</v-text-field>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { VTextField } from 'vuetify/components/VTextField';
export default defineComponent({
name: 'EmailField',
extends: VTextField,
props: {
name: {
type: String,
default: ''
}
},
computed: {
defaultProps() {
return {
color: 'yellow',
bgColor: '#252836',
variant: 'outlined',
density: 'compact'
};
}
}
});
</script>
Consuming the component:
<template>
.......other template items
<EQEmailField v-model="email" name="Email Address" counter :persistentCounter="true" color="blue" density="comfortable" />
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
export default defineComponent({
components: {
EmailField: defineAsyncComponent(() => import('@/components/custom/email-text-field.vue'))
}
});
</script>
The default props (defaultProps) set within the component function correctly and apply to Vuetify as expected. Challenges arise when consuming the component and attempting to use passed props to override default ones. In this scenario, the default props always take precedence, and the consumer-side props are neglected. Attempts to override a value already defined in defaultProps prove unsuccessful, while adding new props works without issues. It seems like there is a need to navigate through the props and determine which should be applied. While this may pose a challenge, it appears to be a common occurrence that needs to be addressed.