Is there proper way to set default values to component props?

Fragster

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?

dobbel

@Fragster

what do you mean with ‘without interference with q-card’?

Fragster

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 )

dobbel

@Fragster

Instead of using a global mixin you can use extends 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

Fragster

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

dobbel

@Fragster

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/