npm version npm downloads Github Actions CI Codecov License

Efficient Moment.js integration for Nuxt.js

📖 Release Notes

• Remove unused Moment.js locales using moment-locales-webpack-plugin for much less bundle size.
• Inject $moment to the context everywhere.

1. Add @nuxtjs/moment dependency to your project

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

2. Add @nuxtjs/moment to the buildModules section of nuxt.config.js

export default {
 buildModules: [
 // Simple usage
 '@nuxtjs/moment',
 // With options
 ['@nuxtjs/moment', { /* 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.

export default {
 buildModules: [
 '@nuxtjs/moment'
 ],
 moment: {
 /* module options */
 }
}

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.

{
 "compilerOptions": {
 "types": [
 "@nuxt/types",
 "@nuxtjs/moment"
 ]
 }
}

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/moment to your types.

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!

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']
 }
}

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.

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
 }
 }
}

You can set a default time zone via the defaultTimezone option.

export default {
 buildModules: [
 '@nuxtjs/moment'
 ],
 moment: {
 defaultTimezone: 'America/Los_Angeles'
 }
}

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
 }
}

You can easily use $moment service from templates.

<div v-text="$moment(...)"></div>
<div>{{ $moment(...) }}</div>

MIT License

Copyright (c) Nuxt Community