Managing Mixins & Utilities in VueJS

I have been working quite a bit with Vue.js and I have sort of found a sweet spot for how to manage utilities in a Vue project.

I often use mixins to share utility functions and constants related to those utilities across components. Example:

• filters
• data processing functions
• common event handlers etc.

Filters are slightly special because they can be used in both the component definition in script and the corresponding template. Sometimes exclusively in the script without any usage in the templates. In those cases, it does not feel right to bring in the utility functions as an entire mixin.

So, I write the functions separately and then export a mixin that references those functions.

Here's an example:

// src/utils/datetime.ts

// Export individual function
export function getDurationByMillis(millis: number) {
  if (millis < 0) {
    millis = 0;
  }
  let seconds: any = Math.floor((millis / 1000) % 60);
  let minutes: any = Math.floor((millis / (1000 * 60)) % 60);
  let hours: any = Math.floor(millis / (1000 * 60 * 60));
  hours = hours < 10 ? "0" + hours : hours;
  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;
  return `${hours}:${minutes}:${seconds}`;
}

// Export Mixin
@Component({
  filters: {
    duration: getDurationByMillis,
    anotherFilter: anotherFunction,
  },
})
export default class TimeUtils extends Vue {}

If you remember the Revealing Module Pattern this should look similar.

In the JS world, the mixin export looks simpler.

export default {
  filters: {
    duration: getDurationByMillis,
  },
};

In components where I need to convert millis to duration, only in the script, I just import the getDurationByMillis function instead of the entire mixin.

import { getDurationByMillis } from "@/utils/datetime.ts";

I also put any constants that I need for my datetime utilities in that same utility file as well. Example -

export const DATE_FORMAT_LONG = "DD/MM/YYYY HH:mm:ss";
export const DATE_FORMAT_SHORT = "DD/MM/YYYY";

I can even export multiple small mixins from the same file. Example - one for just date related utilities and another for time utilities.

I feel this has couple of benefits.

• All the utility functions / constants those functions use are co-located.
• Imports become explicit for script-only usages.
• Filter functions become much more reusable.
• Maintenance becomes much easier and with little bit of work these utility functions become consumable in other projects too.

Hope this helps you out.