How to use Date-FNS in VueJS?

Question

I'm new to Date-FNS and I need to get this example to work in VueJS:

import { format, formatDistance, formatRelative, subDays } from 'date-fns'

format(new Date(), '[Today is a] dddd')
//=> "Today is a Wednesday"

formatDistance(subDays(new Date(), 3), new Date())
//=> "3 days ago"

formatRelative(subDays(new Date(), 3), new Date())
//=> "last Friday at 7:26 p.m."

How to get it to work?

Answer 1

Just like moment js, all you need is to use the date library is to import and include it in your data:

import { format, formatDistance, formatRelative, subDays } from 'date-fns'

export default {
  data () {
    return {
      format,
    }
  }
}

And now in your template, you can use format as:

<template>
 <p> Today's date is: {{ format(new Date(), 'dddd')  }} </p>
</template>

---

With Locale:

I haven't tried the locale but it seems very straight forward. According to the manual I think this should work.

import { format, formatDistance, formatRelative, subDays } from 'date-fns'
import es from 'date-fns/locale/es'
window.locale = 'es'

export default {
  data () {
    return {
      format,
    }
  },

  methods: {
    getFormat () {
      return this.format(new Date(), 'dddd', {locale: window.locale})
    } 
  }
}

And now in your template, you can use format as:

<template>
 <p> Today's date is: {{ getFormat() }} </p>
</template>

I think if you spend a couple of minutes with it, you can get a better working solution for you.

Answer 2

Update with lazy loading approach

This option is good if you need to support many locales and want to pay attention to bundle sizes.

let dateFnsLocale
if (lang === 'en') { dateFnsLocale = await import('date-fns/locale/en-US') }
if (lang === 'hu') { dateFnsLocale = await import('date-fns/locale/hu') }
if (lang === 'fr') { dateFnsLocale = await import('date-fns/locale/fr') }

The reason why I'm not dynamically concatenating the lang to the import string is because I've found that in that case Webpack will not be able to decide which locales you'll import, and it takes all.

Personally I've started to store the dateFnsLocale in Vuex, so once your import is done you can commit it to state if you want, making it accessible throughout your application similarly as the global namespace of window did.

Original answer

If you need to support multiple locales I think it's best to do this in your main.js.

import { default as en } from 'date-fns/locale/en'
import { default as hu } from 'date-fns/locale/hu'
import { default as fr } from 'date-fns/locale/fr'

window.dateFnsLocales = {
  hu,
  fr,
  en
}

Then anywhere in your script tags you can:

format(new Date(), 'dddd', {locale: window.dateFnsLocales[CURRENTLY SELECTED LOCALE]})

Answer 3

In the version v1.30.1 of date-fns you have to import/require from date-fns/something.

In order to make it work with Vuejs:

import format from "date-fns/format"
import distanceInWords from "date-fns/distance_in_words"
import subDays from "date-fns/sub_days"

export default {
  name: "MyComponent",
  computed: {
    inWords () { return distanceInWords(subDays(new Date(), 3), new Date()) },
    today () { return format(new Date(), '[Today is a] dddd') },
  },
}

And the template tag:

<template>
  <div>
    <p>{{ inWords }}</p>
    <p>{{ today }}</p>
  </div>
</template>