vuetify
vuetify copied to clipboard
[Feature Request] Simplify defaults assignment for input like components (textfields, selects, autocompletes, etc.)
Problem to solve
Let's say a dev want all textfields, selects, autocompletes, etc. to be outlined. He can't do
createVuetify({
defaults: {
global: {
variant: 'outlined'
}
}
})
otherwise everything gets messy (list items, cards, etc.). So he ends up doing something like this:
const INPUTS_VARIANT = 'outlined'
createVuetify({
defaults: {
VTextField: {
variant: INPUTS_VARIANT
},
VAutocomplete: {
variant: INPUTS_VARIANT
},
VSelect: {
variant: INPUTS_VARIANT
}
// and so on...
}
})
This is not an elegant solution.
Proposed solution
It would be awesome to have something like:
VInput: {
// place here all default props which are going to be applied to textfields, selects, etc.
variant: 'outlined'
color: 'primary'
}
not an exact solution but heres how ive done about solving it
const inputProps = {
variant: 'outlined',
density: 'compact',
hideDetails: true,
color: 'primary',
persistentPlaceholder: true,
}
export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({
// ...
defaults: {
VTextField: { ...inputProps },
VTextarea: { ...inputProps },
VSelect: { ...inputProps, openOnClear: false },
VAutocomplete: { ...inputProps, openOnClear: false },
VCombobox: { ...inputProps, openOnClear: false },
}
})
}
not an exact solution but heres how ive done about solving it
const inputProps = { variant: 'outlined', density: 'compact', hideDetails: true, color: 'primary', persistentPlaceholder: true, } export default defineNuxtPlugin((nuxtApp) => { const vuetify = createVuetify({ // ... defaults: { VTextField: { ...inputProps }, VTextarea: { ...inputProps }, VSelect: { ...inputProps, openOnClear: false }, VAutocomplete: { ...inputProps, openOnClear: false }, VCombobox: { ...inputProps, openOnClear: false }, } }) }
Surely better than mine, but I'd like to have a more elegant and shorter solution from Vuetify.
Stumbled upon this while writing a related bug report... Wanted to let that this is sort of already a feature, you just have to specify them on VField
. Currently this seems to only work on props that default to undefined
, although that's not confirmed.