Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@nuxtjs/moment

Package Overview
Dependencies
Maintainers
5
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nuxtjs/moment

Efficient Moment.js integration for Nuxt.js

  • 1.6.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
5
Created
Source

@nuxtjs/moment

npm version npm downloads Github Actions CI Codecov License

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
  1. Add @nuxtjs/moment to the buildModules section of nuxt.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, 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

FAQs

Package last updated on 09 May 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc