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?



  • @Fragster

    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 😞 )



  • @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



  • 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 😞



  • @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/


Log in to reply