This module is not yet compatible with Nuxt 3
@nuxtjs/date-fns
@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 thebuildModules
section ofnuxt.config.js
export default {
buildModules: [
// Simple usage
'@nuxtjs/date-fns',
// With options
['@nuxtjs/date-fns', { /* module options */ }]
]
}
⚠️ 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.
⚠️ 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
, thevue instance
and thevuex 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>
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
License
Copyright (c) Nuxt Community