Skip to content

Relative time formatting

Relative time formatting using this plugin is basically wrapper for Intl.RelativeTimeFormat constructor.

Usage example

vue
<template>
  <!-- output will be: "in 10 days" -->
  <v-intl-relative-time-format
    wrapper="w-full"
    :payload="payload"
    :format="formatOptions"
  />
</template>
<script>
  import { VIntlRelativeTimeFormat } from '@vinayakkulkarni/v-intl';
  export default {
    name: 'YourAwesomeComponent',
    components: {
      VIntlRelativeTimeFormat,
    },
    data() {
      return {
        payload: {
          number: 10,
          time: 'days',
        },
        formatOptions: {
          locales: 'en-IN', // any valid locale in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
          options: {
            localeMatcher: 'best fit', // other values: "lookup"
            numeric: 'always', // other values: "auto"
            style: 'long', // other values: "short" or "narrow"
          },
        },
      };
    },
  };
</script>