Vuetify override default prop value

Question

Is there any way to change default value of a prop in a vuetify component?
For example lets say we have a component like v-btn.
This component has many props, One of them like outlined with default value of false.
Lets say i want is to change this default value to true forever in my application. Is there any way?

@Txema Cannot edit a current project with too many files and codes. find all v-btn components and replace them with another component. also it would be nice to set some defaults before starting to work with vuetify. to make the code volume smaller — Pooria Honarmand
Same issue, I'd like to see all my input fields have the "filled" and "persistent-hint" props by default instead of having to add it for every instance. And I'd prefer to do this without having to make a custom components again — TheLD

d9k d9k · Accepted Answer · 2020-11-30T14:47:18

I was able to do that at the top of my app's entry point (before any Vue component creation).

/** 
 * [required imports]
 * (you must somehow import VBtn component separately)
 */

Vue.use(Vuetify);
VBtn.options.props.outlined.default = true;

But this practice is called monkey patching and not encouraged to use, consider to use inheritance instead.

In my case I was trying to get component from Vue.options.components['VBtn'] but it didn't work.

So I monkey patched vue library too:

import Vue from "vue";
import Vuetify from 'vuetify'

export const vueComponentsImported: any = {};
export const vueComponentFnDefault = Vue.component.bind(Vue);

/** @see node_modules/vue/src/core/global-api/assets.js */
export const vueComponentFnModded = (id, component) => {
  vueComponentsImported[id] = component;
  return vueComponentFnDefault(id, component);
};

Vue.component = vueComponentFnModded;

Vue.use(Vuetify);

let VBtn = vueComponentsImported['VBtn'];
if (VBtn) {
  VBtn.options.props.outlined.default = true;
}

(please feel free to edit this code if it doesn't work, I have much more lines in my app)

Vuetify override default prop value

2 Answers