Using Vuetify Core Functionality - JessicaOPRD/docs GitHub Wiki

Vuetify offers many compositional mixins that may be helpful to developers who already use the Vuetify library.

🟢 Well-designed and get a lot of use

🟢 Standardized approach for many needed behaviors

🟢 Custom components built on them will be consistent with Vuetify library

🟢 Can import and use with ES5+ or Typescript

🟢 Good training wheels for learning re-usable Vue patterns

🟢 Handle many accessibility/Section 508 needs

🔴 Officially a private API that could change, so you will need to keep up with changes (or create own repo or copy into your project)

🔴 If unfamiliar with TypeScript, need to learn to read it or refer to compiled ES5 (which is not on GitHub?)

🟡 Vuetify source uses pattern that may be different to many Vue developers (render instead of <template>), but mixins can be used regardless of pattern in many cases

🔴 If using ES5 import, may add to your build size – I need to explore this more

Read more about Vue's render function and related features in the Vue docs.

Remember also that Vuetify encapsulates helpful re-usable functionality in base components that can be wrapped and re-used to create more advanced components. These components are typically not used on their own, but are good building blocks. Using them circumvents accessing the internal private API directly. Some examples are:

• VInput
• VItem and VItemGroup (must be used together)

You can extend existing components (see VCheckbox), however there is a learning curve to the rendering methods if you are accustomed to Vue or Angular templates. Mostly these make good examples for developing similar components from base mixins.

import VCheckbox from 'vuetify/es5/components/VCheckbox/VCheckbox'

export default VCheckbox.extend({
  name: 'op-jumbo-checkbox'
})

There are a few problematic or verbose ways to do this in Vue. The worst is probably to access the parent directly from the child:

mounted() {
  // Attempt to register this with a grouping parent automagically
  if (
    this.$parent &&
    this.$parent.$vnode.componentOptions.tag === 'op-photo-chip-group' &&
    isFunction(this.$parent.register)
  ) {
    this.$parent.register(this)
  }
},

This works but is fragile, and requires a direct parent-child relationship (the child cannot be further nested in other elements).

Another way is do manual registration by passing a registration function via scoped slots. There may be cases where this makes sense, but it does require awkward passing.

mounted() {
  // Allow manual registration signal
  this.$emit('register', this)
},

In the parent template:

<v-input :error-messages="errors">
  <slot :register="register"></slot>
</v-input>

register(item) {
  // Append to internal items array
}

In use:

<op-large-chip-group #default="{ register }">
  <op-large-chip @register="register($event)"></op-large-chip-group>
</op-large-chip-group>

Another way similar to the method above is to access the parent's API via $refs to invoke the register method.

The least messy way is to make use of Vue's provide/inject feature. Vuetify's Registrable mixin wraps this behavior. A namespace is provided by the parent:

provide() {
  return {
    photoChipGroup: this
  }
},

Which the child uses:

<script>
import { factory as GroupableFactory } from 'vuetify/es5/mixins/groupable'

export default {
  name: 'op-photo-chip',

  mixins: [GroupableFactory('photoChipGroup')],

  // Rest of component
}
</script>

Vuetify uses these internally, and it can be helpful to use similar conventions in custom components. I just love seeing how other developers name things. From the C# learning module: "A software developer once famously said 'The hardest part of software development is naming things.'"