Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vuetify set outlined for all v-text-field by default

Is there are simple way to change default value of props "outlined" for all "v-text-field" across entered project?

https://vuetifyjs.com/en/components/text-fields

enter image description here

like image 613
112Legion Avatar asked Oct 23 '25 22:10

112Legion


1 Answers

You could create a wrapper component and extends from VTextField (see treeshaking) and customise the default value(s).

import Vue from 'vue';
import { VTextField } from 'vuetify/lib';

Vue.component('TextFieldOutlined', {
  extends: VTextField,
  props: {
    outlined: {
      type: Boolean,
      default: true
    }
  }
})

Using it like:

<text-field-outlined
  label="Some label"
  clearable
  dense>
</text-field-outlined>

FWIW, extending a component means all base component's props are passed along and thus equally usable.

like image 53
Yom T. Avatar answered Oct 26 '25 12:10

Yom T.



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!