@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

Install @nuxtjs/moment to your project:

yarn add --dev @nuxtjs/moment
# OR
npm i --save-dev @nuxtjs/moment

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

export default {
  buildModules: [
    '@nuxtjs/moment'
  ]
}

NOTE: 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.

Configuration

To strip all locales except en:

export default {
  modules: [
    '@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']
  }
}

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>

Development

Clone this repository
Install dependencies using yarn install or npm install
Start development server using npm run dev

License

MIT License

Thanks Ivan Akulov for making this awesome webpack plugin. 💖

bruno-fernandes/moment-module