Setting up a utility class and using it within a vue component

Question

A vue application I am working on currently has lots of code redundancies relating to date functions. In an effort to reduce these redundancies, I'd like to create a utility class as shown below, import it and set it to a Vue data property within the component, so I can call the date functions within it.

I am not certain on the best way to implement this. The current implementation results in an error saying TypeError: this.dates is undefined and my goal is not only to resolve this error but create/utilize the class in the Vue environment using best standards.

Importing utility class

    import Dates from "./utility/Dates";
...

Component

const contactEditView = Vue.component('contact-edit-view', {
        data() {
            return {
                contact: this.myContact
                dates: Dates
            }
        },
...

Dates.js

export default {
    dateSmall(date) {
        return moment(date).format('L'); 
    },
    dateMedium(date) {
        return moment(date).format('lll');
    },
    dateLarge(date) {
        return moment(date).format('LLL');
    }
};

View

Date of Birth: {{ dates.dateMedium(contact.dob) }}

Answer 1

My suggestion for this is to use a plugin option in Vue. About Vue plugin

So you will crate a new folder called services, add file yourCustomDateFormater.js:

const dateFormater = {}

dateFormater.install = function (Vue, options) {

   Vue.prototype.$dateSmall = (value) => {
     return moment(date).format('L')
   }
   
   Vue.prototype.$dateMedium = (value) => {
     return moment(date).format('lll')
   }
}

In main.js:

import YourCustomDateFormater from './services/yourCustomDateFormater'

Vue.use(YourCustomDateFormater)

And you can use it anywhere, like this:

this.$dateSmall(yourValue)

---

Or, if you want to use mixin. Read more about mixin

Create a new file dateFormater.js

export default {
  methods: {
    callMethod () {
      console.log('my method')
    }
  }
}

Your component:

import dateFormater from '../services/dateFormater'

  export default {
    mixins: [dateFormater],
    mounted () {
      this.callMethod() // Call your function
    }
  }

Note: "Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components. In most cases, you should only use it for custom option handling like demonstrated in the example above. It’s also a good idea to ship them as Plugins to avoid duplicate application." - Vue documentation

Answer 2

dateUtilsjs

import moment from 'moment-timezone'

function formatDateTime(date) {
    return moment.utc(date).format("M/D/yyyy h:mm A")
}

export { formatDateTime }

Component JS

...
import { formatDateTime } from '../utils/dateUtils'
...
methods: {
    formatDateTime,
}

Used within component

{{ formatDateTime(date) }}