@nuxtjs/moment

Efficient Moment.js integration for Nuxt.js

📖 Release Notes

Features

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

Setup

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

⚠️ If you are using Nuxt older than v2.9 you have to install module as a dependency (No --dev or --save-dev flags) and also use modules section in nuxt.config.js instead of buildModules.

export default {
  buildModules: [
    // Simple usage
    '@nuxtjs/moment',

    // With options
    ['@nuxtjs/moment', { /* module options */ }]
  ]
}

Using top level options

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

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.

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

Instead of a filter, you can easily use $moment service from templates (and yes, it is reactive!).

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

License

MIT License

Thanks Ivan Akulov for making this awesome webpack plugin. 💖

Copyright (c) Nuxt Community