5

I'm using the webpack template from vue-cli for my Vue project and I have both moment and moment-timezone installed in npm.

In my single file components, I've been able to get moment to work with moment-timezone by including the following import lines:

import moment from 'moment'
import moment_timezone from 'moment-timezone'

The moment_timezone object isn't ever used, but it seems to need to be there for moment.tz functions to work.

My questions are:

  1. Is this the proper way to load moment and moment-timezone in my setup?
  2. How do I load only the data from moment-timezone-with-data-2012-2022.min.js? I see it in the moment-timezone package's builds directory, but I'm unclear how to specify that that is the data that I would like to use.
Slotheroo
  • 925
  • 2
  • 9
  • 17

1 Answers1

17

Answering my own question as I seem to have sorted it out.

1 - It seems that moment-timezone requires the use of moment, so if you are going to use both moment and moment-timezone, you can simply import moment from the moment-timezone module and it will work just fine. So...

import moment from 'moment'
import moment_timezone from 'moment-timezone'

becomes

import moment from 'moment-timezone'

2 - Moment-timezone has files that represent the complete moment-timezone code plus specific versions of the data under data/builds. You can import moment-timezone directly from these files without needing to import the moment-timezone.js file in the root of the module. So...

import moment from 'moment-timezone'

becomes

import moment from 'moment-timezone/data/builds/moment-timezone-with-data-2012-2022.js'
Slotheroo
  • 925
  • 2
  • 9
  • 17
  • 1
    Thanks! That makes life easy. For anyone wanting to make Moment available globally in their Vue app, you can import it in your app.js file and then add it as a Vue instance property. `import moment from 'moment-timezone'; Vue.prototype.$moment = moment;` Then you can access it within curly braces **{{ $moment() }}**, or within methods **this.$moment()**. – Josh Aug 18 '20 at 14:21