Is there proper way to set default values to component props?
-
e.g. I want to set default no-caps for all q-btn, q-tabs (and everywhere), i can use dirty hack with global mixin in boot file:
export default function ({ Vue }) { const strategies = Vue.config.optionMergeStrategies strategies.props = function (parent, child) { const result = { ...parent, ...child } if (parent?.noCaps) { result.noCaps = parent.noCaps } return result } Vue.mixin({ props: { noCaps: { type: Boolean, default: true } } }) // strategies.props = strategies.methods }
but what if I want to set all my q-input and q-field “square filled” without interference with q-card?
-
what do you mean with ‘without interference with q-card’?
-
My fault! interference with other components with same props. E.g. fab has ‘square’ prop, but i want to set default only for q-filed and q-input. Or no-caps only for buttons, not for q-tabs. Is there some way to configure default values for props for definite component?
(sorry for bad english)
-
Instead of using a global
mixin
you can useextends
to extend an existing quasar component. With extends you can set default props without messing with other components.<script> import QInput from 'quasar' export default { name: 'MyInput', extends: QInput props: { outlined: { type: Boolean, default: true }, dense: { type: Boolean, default: true } } } </script>
It’s from this thread:
https://forum.quasar-framework.org/topic/5950/configure-component-prop-defaults/4 -
I was thinking about this, but in this case, the auto-import feature is lost, so i need import component globally, or in every place.
Also I need use my names for components. And I finally - lost Vetur autocompletion in templates -
I understand. I found this article about how the composition api is replacing mixins in vue3 ( or with a package in vue2). Maybe you find a better solution there:
https://css-tricks.com/how-the-vue-composition-api-replaces-vue-mixins/