Is it possible to set default props on vuetify components?

Question

Well, guys, what I’d like to know is, is there any way to set the default values for the vuetify components' props? So I don’t have to repeat the props every time I use the component in the style I want.

As in the following example where I have to put 5 props to have the style I want:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app>
      <v-text-field
        placeholder="Nome"
        outlined
        flat
        dense
        solo
        required
      ></v-text-field>
  </v-app>
</div>
  
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

Answer 1

Basically what I advise in this case is to isolate the vuetify component with the props default in another component in your application. I made an example below very simple, however in your application I advise to use a single file Component instead of Vue.component.

Vue.component('field', {
  props: ['value'],
  data: function () {
    return {
      valueData: 0
    }
  },
  created() {
    this.valueData = this.value  
  },
  watch: {
    valueData: function(newValue) {    
      this.$emit('input', newValue);
    }    
  },
  template: `<v-text-field
        placeholder="Nome"
        outlined
        flat
        dense
        solo
        v-model.sync="valueData"
        required
      ></v-text-field>`
})
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    valueExample: '5'
  }
})

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
      <field v-model="valueExample"/>      
  </v-app>  
</div>

This way it gets simpler, but really I wouldn’t advise this approach if there aren’t at least a few props that you transfer to the Vuetify component, otherwise the future maintenance cost may be high. I hope I’ve helped.