How to create local helpers to tidy up Vue components

Question

I have a Vue component that does a number of complex tasks in mounted(). These tasks include for example, initializing Bootstrap Date Pickers, Time Pickers, and Typeaheads.

At the moment all of this initialization code is in my mounted() method. In order to understand what's going on, the developer has to read through the code comments.

Ideally I would move sections of code to their own methods, and only have method calls in mounted(), something such as:

mounted () {
  this.helpers.initDatePickers();
  this.helpers.initTimePickers();
  this.helpers.initTypeaheads();
}

How can I achieve this? I realise that I can put them in the methods object, but I would prefer to leave that for methods which can be accessed via declarations in templates.

Note that I am not asking how to share helper functions across components (or globally). I am merely asking how to create local functions in their own space, in order to clean up some longer methods.

Answer 1

You could create a mixin module which has generic initialization.

// DatePickerMixin.js
import whatever from 'specific-date-picker-stuff';

export default {
  methods: {
    initDatePickers() {
      // initialization here
    }
  }
}

Then your component just uses the mixin modules.

<script>
import DatePickerMixin from './mixins/DatePickerMixin';
import TimePickersMixin from './mixins/TimePickersMixin';

export default {
  mixins: [
    DatePickerMixin,
    TimePickersMixin
  ],
  data() {/* ... */},
  // etc.
}
</script>

You could wrap all of these in the same mixin as well.

And if you don't want to always set the mixins, there's global mixin.

import DatePickerMixin from './mixins/DatePickerMixin';

Vue.mixin(DatePickerMixin);

Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components.

Answer 2

As @EmileBergeron said, mixins are a good solution. You can also create plugins, which so happen to encompass mixins as well but much more. They allow you to extend the Vue constructor or add instances/methods directly to the Vue prototype.

Section on plugins from the documentation

MyPlugin.install = function (Vue, options) {
  // 1. add global method or property
  Vue.myGlobalMethod = function () {
    // something logic ...
  }

  // 2. add a global asset
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // something logic ...
    }
    ...
  })

  // 3. inject some component options
  Vue.mixin({
    created: function () {
      // something logic ...
    }
    ...
  })

  // 4. add an instance method
  Vue.prototype.$myMethod = function (methodOptions) {
    // something logic ...
  }
}

Using your plugin is done by:

// calls `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

// pass options to your plugin
Vue.use(MyPlugin, { someOption: true })

Here's a small plugin I recycle exposing various string functions in the pluralize library:

import {plural, singular, camelCase} from 'pluralize'
PluralizePlugin.install = function (Vue, options) {
    Vue.plural = plural
    Vue.singular = singular
    Vue.camelCase = camelCase
}

With it you can use this.singular(str), this.plural(str), etc. throughout your components. Pretty simple but convenient.