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

Solution 1:

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

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

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

Using it like:

<text-field-outlinedlabel="Some label"clearabledense></text-field-outlined>

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

Solution 2:

No need for custom component

By default, the v-text-field uses the primary color of your application.

Change outline color of a single v-text-field

If you want to change the outline color of a single v-text-fieldwhen it's focused, you can simply use the color prop.

<v-text-fieldoutlinedcolor="red"
/>

Change the primary color of your app

This will change the color of all v-text-fieldwhen they are focused:

importVuefrom'vue'importVuetifyfrom'vuetify/lib/framework'Vue.use(Vuetify)

exportdefaultnewVuetify({
  theme: {
    options: {
      customProperties: true
    },
    themes: {
      light: {
        primary: '#5E72E4'
      }
    }
  }
})

Change the color of all v-text-field (focused or not)

Now, if you want to change the color of the outline even if the element is not focused, you can use the SASS variable API.

If you installed Vuetify via Vue CLI, create a src/scss/variables.scss file:

$material-light: ( 'text-fields': (
  'filled': rgba(0, 0, 0, 0.06),
  'filled-hover': rgba(0, 0, 0, 0.12),
  'outlined': rgba(0, 0, 0, 0.2),
  'outlined-disabled': rgba(0, 0, 0, 0.1),
  'outlined-hover': rgba(0, 0, 0, 0.4)
));

$text-field-outlined-fieldset-border: 1px solid currentColor;

This way you have full control over both, focused and initial state. The example above makes outlines lighter and reduce the focused outline width to 1px;