@nuxtjs/moment
v1.6.1
Published
Efficient Moment.js integration for Nuxt.js
Downloads
115,316
Keywords
Readme
@nuxtjs/moment
Efficient Moment.js integration for Nuxt.js
Features
- Remove unused Moment.js locales using moment-locales-webpack-plugin for much less bundle size.
- Inject
$moment
to the context everywhere.
Setup
- Add
@nuxtjs/moment
dependency to your project
yarn add --dev @nuxtjs/moment # or npm install --save-dev @nuxtjs/moment
- Add
@nuxtjs/moment
to thebuildModules
section ofnuxt.config.js
export default {
buildModules: [
// Simple usage
'@nuxtjs/moment',
// With options
['@nuxtjs/moment', { /* 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/moment'
],
moment: {
/* 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/moment"
]
}
}
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/moment
to your types.
Configuration
To strip all locales except en
:
export default {
buildModules: [
'@nuxtjs/moment'
]
}
To strip all locales except en
, fr
and fa
:
export default {
buildModules: [
'@nuxtjs/moment'
],
moment: {
locales: ['fa']
}
}
Note: en
is built into Moment and can’t be removed!
Set default locale
You can set a default locale via the defaultLocale
option. It must be included
int the locales you keep (or 'en'
) and will only work when using the plugin option.
export default {
buildModules: [
'@nuxtjs/moment'
],
moment: {
defaultLocale: 'de',
locales: ['de']
}
}
Plugins
You can import plugins to moment. See a list of plugins
export default {
buildModules: [
'@nuxtjs/moment'
],
moment: {
plugins: [
'moment-strftime',
'moment-fquarter'
]
}
}
Note: Don't forget to install each plugin.
Timezone
You can enable moment-timezone via the timezone
option.
export default {
buildModules: [
'@nuxtjs/moment'
],
moment: {
timezone: true
}
}
You can filter time zone data and thus produce significant savings in file size. See all options in moment-timezone-data-webpack-plugin.
export default {
buildModules: [
'@nuxtjs/moment'
],
moment: {
timezone: {
matchZones: /Europe\/(Belfast|London|Paris|Athens)/,
startYear: 2000,
endYear: 2030
}
}
}
Set default time zone
You can set a default time zone via the defaultTimezone
option.
export default {
buildModules: [
'@nuxtjs/moment'
],
moment: {
defaultTimezone: 'America/Los_Angeles'
}
}
Disable plugin
This module also registers a plugin to include all needed locales as well as injecting moment as $moment
to Vue context. You can disable this behaviour using plugin: false
.
export default {
buildModules: [
'@nuxtjs/moment'
],
moment: {
plugin: false
}
}
Using inside templates
You can easily use $moment
service from templates.
<div v-text="$moment(...)"></div>
<div>{{ $moment(...) }}</div>
License
Copyright (c) Nuxt Community