@nuxtjs/date-fns NPM

@nuxtjs/date-fns

Modern JavaScript date utility library - date-fns for Nuxt.js

Setup

Add @nuxtjs/date-fns dependency to your project

yarn add --dev @nuxtjs/date-fns # or npm install --save-dev @nuxtjs/date-fns

Add @nuxtjs/date-fns to the buildModules section of nuxt.config.js

export default {
  buildModules: [
    // Simple usage
    '@nuxtjs/date-fns',

    // With options
    ['@nuxtjs/date-fns', { /* module options */ }]
  ]
}

:warning: If you are using Nuxt < v2.9 you have to install the module as a dependency (No --dev or --save-dev flags) and use modules section in nuxt.config.js instead of buildModules.

Using top level options

export default {
  buildModules: [
    '@nuxtjs/date-fns'
  ],
  dateFns: {
    /* module options */
  }
}

Typescript setup

Add the types to your "types" array in tsconfig.json after the @nuxt/types entry.

:warning: Use @nuxt/vue-app instead of @nuxt/types for nuxt < 2.9.

tsconfig.json

{
  "compilerOptions": {
    "types": [
      "@nuxt/types",
      "@nuxtjs/date-fns"
    ]
  }
}

Why?
For typescript to be aware of the additions to the nuxt Context, the vue instance and the vuex store, the types need to be merged via declaration merging by adding @nuxtjs/date-fns to your types.

Options

`locales`

Type: Array[String]
Default: []

Locales to be imported.

`defaultLocale`

Type: String
Default: null

You can preset default locale.

`fallbackLocale`

Type: String
Default: null

You can preset a fallback locale for when a method is called with an unsupported locale.

`format`

Type: String
Default: null

You can preset default format.

`methods`

Type: Array
Default: null

Methods to be imported. If not defined all methods are imported.

Usage

This module inject $dateFns to your project:

<template>
  <div>
    // Using default format and locale
    {{ $dateFns.format(new Date()) }}

    // Using custom format
    {{ $dateFns.format(new Date(), 'yyyy-MM-dd') }}

    // Using custom format and locale
    {{ $dateFns.format(new Date(), 'yyyy-MM-dd', { locale: 'ru' }) }}

    // Using asyncData
    {{ dateFormatted }}
  </div>
</template>

<script>
export default {
  asyncData({ $dateFns }) {
    return {
      dateFormatted: $dateFns.format(new Date())
    }
  }
}
</script>