nuxt-community / date-fns-module

Modern JavaScript date utility library - date-fns for Nuxt.js
MIT License
78 stars 8 forks source link
date-fns nuxt nuxt-module nuxtjs

@nuxtjs/date-fns

npm version npm downloads Github Actions CI Codecov License

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

📖 Release Notes

Setup

  1. Add @nuxtjs/date-fns dependency to your project
yarn add @nuxtjs/date-fns # or npm install @nuxtjs/date-fns
  1. 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 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

Locales to be imported.

defaultLocale

You can preset default locale.

fallbackLocale

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

format

You can preset default format.

methods

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>

Development

  1. Clone this repository
  2. Install dependencies using yarn install or npm install
  3. Start development server using npm run dev

License

MIT License

Copyright (c) Nuxt Community