@nuxtjs/date-fns

@nuxtjs/date-fns

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

📖 Release Notes

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.

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(ctx) {
    return {
      // $dateFns is available in context
      dateFormatted: ctx.app.$dateFns.format(new Date())
    }
  }
}
</script>

License

MIT License

Copyright (c) Nuxt Community

Changelog

1.2.0 (2020-01-27)

Features

• make injected date-fns treeshakeable (#25) (f6517cf)