Setting Quasar component props globally to a default value

[hedgehogs-mind]

Imagine you want to change the default prop values of a component prop globally.

Imagine the following requirements: Per default,

• QBtn should always render like <q-btn color="primary" outline rounded no-caps :ripple="false" /> and
• QInput should always render like <q-input outlined rounded />

To be mentioned: Of course, we could create a custom component for our default design, but we wanted to keep our code as Quasar-clean as possible (and keep autocompletion for props if our IDE detects Quasar components). And thus the requirement was, that we still use the tags q-btn respectively q-input.

---

Here is a way nr. 1 I found, to achieve this without a lot of effort (although I don't know if it's good or bad):

1. Create boot file and include it in quasar.conf.js.
2. Import the elements to set/overwrite default values for.
3. Set/Overwrite default values by using syntax {component}.options.props.{propName}.default = {newDefaultValue}

Example for the requirements listed earlier:

import {QBtn, QInput} from "quasar";

QBtn.options.props.color.default = "primary"
QBtn.options.props.outline.default = true
QBtn.options.props.rounded.default = true
QBtn.options.props.noCaps.default = true
QBtn.options.props.ripple.default = false

QInput.options.props.outlined = true
QInput.options.props.rounded = true

Evaluation:

• +: normal component tags can still be used
• +: super simple to set up and configure
• - / ?: is it allowed to modify options.props?

What do you think of it? Do you think it's okay to modify options.props of an imported component?

We did not find a solution like this for Vue somewhere else.

---

Altneratively: We thought of wrapping Quasar components and replacing the components in the global registry with our wrapper (kinda like a monkey patch). This would also allow to define default classes for components.

Exchanging the components via Vue.component(...) did not work. Until now, I also did not really found out, how and where Quasar registers its components. I only know they are registered upon the first step (according to the boot files doc page).

As a really bad workaround I created a global mixin, which replaces certain components with monkey patch components before mount.

Code snippets

Boot file:

import monkeyPatches from "components/monkeyPatches"

const applyMonkeyPatches = (component) => {
  if ( !!component.$options.components ) {
    Object.keys(component.$options.components).forEach(key => {
      if ( !!monkeyPatches[key] ) {
        component.$options.components[key] = monkeyPatches[key]
      }
    })
  }
}

export default async ({Vue}) => {
  Vue.mixin({
    beforeMount() {
      applyMonkeyPatches(this)
    }
  })
}

monkeyPatches(/index.js):

import PatchedQBtn from "components/monkeyPatches/PatchedQBtn";
import PatchedQInput from "components/monkeyPatches/PatchedQInput";

export default {
  QBtn: PatchedQBtn,
  QInput: PatchedQInput
}

PatchedQBtn.vue (uses a template) – prop defaults set and some default classes!:

<template>
  <!-- The v-bind acrobatics are required in order to allow the parent to overwrite default props 
       This is only necessary for Vue 2.x.

       With Vue 3 the merge strategy changed and its enough
       to put v-bind="$attrs" on the original component as  the last attribute.

       v-on="$listeners" is used to pass through listeners.
  -->
  <original-q-btn
    class="q-pa-md"
    v-bind="{...customAttrs, ...$attrs}"
    v-on="$listeners">

    <!-- Pass slots through to original component -->
    <template v-for="(index, name) in $slots" v-slot:[name]><slot :name="name" /></template>
    <template v-for="(index, name) in $scopedSlots" v-slot:[name]="data"><slot :name="name" v-bind="data"></slot></template>

  </original-q-btn>
</template>

<script>
import {QBtn as OriginalQBtn} from "quasar";

export default {
  components: {OriginalQBtn},
  computed: {
    customAttrs: () => ({
      outline: true,
      color: "primary",
      rounded: true,
      ripple: false,
      noCaps: true
    })
  }
}
</script>

PatchedQInput.vue (uses extends) – only prop defaults set:

<script>
import {QInput} from "quasar";

export default {
  extends: QInput,
  props: {
    outlined: {
      type: Boolean,
      default: true
    },
    rounded: {
      type: Boolean,
      default: true
    },
    color: {
      type: String,
      default: "red"
    }
  },
}
</script>

Evaluation:

• +: allows default classes to be defined
• –: more complex
• –: separate files needed
• –: Current implementation: Component exchange will performed upon each mount!_

What do you think of this solution?

[pdanpdan]

or more simple

in a js file

export const options = {
  btn: {
    color: 'primary',
    ...
  },
  ...
}

in a component

import { options } from 'options file'

data () {
  return {
    options
  }
}

<q-btn v-bind="options.btn" ... />

[drahkrub]

@pdanpdan But that would have to be done in each and every component while @hedgehogs-mind changes the defaults globally. I wonder why this simple solution is not mentioned in the docs.

Compare e.g. https://forum.quasar-framework.org/topic/6935/is-there-proper-way-to-set-default-values-to-component-props and the "solutions" proposed over there...

[drahkrub]

wrt Quasar-V2 have a look at #8761 (comment)

[jonmor51]

Is it possible to do something like this when using Quasar from a CDN in the browser, rather than via Webpack? I've tried but get 'QInput is not defined' errors, so I'm wondering what I need to do to be able to extend or modify the default props for QInput.