@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

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.

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.

⚠️ 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, the vue instance and the vuex 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

MIT License

Copyright (c) Nuxt Community