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

Question

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

Disaffection

Answer 1

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.

Cesaria

Perfect. Was looking for something similar regarding the VBtn component. This is a great and simple solution. – Robichaud

It should definitely be marked as the solution. That's clean, still allows to override the props at particular places if needed, and can be applied to any prop besides "outlined". – Velure

What about Composition API? The "extends" is designed for Options API and does not handle the merging of the setup() hook. – Nemathelminth

Answer 2

The extends is not good way for Vue 3 (Composition API). You need create own control based on v-text-field.

But for Vuetify 3 you need use Global configuration

I didn't try this code. But I think something like this:

createVuetify({
  defaults: {
    VTextField: { variant: 'outlined' },
  },
})

Nemathelminth

Can you please give more details directly in the answer? – Deandeana

Ok. I have appended some code – Nemathelminth