Vuetify override default prop value

user_11391488 0
Viewed 969

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?

vuetify.js vue.js
2 Answers

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)

user_17606430

It doesn't make sense to do this，you could just replace '<v-btn' with '<v-btn outlined'.

user_128615740
Related