Vue modules, moment-timezone - How to load moment-timezone correctly and how to use the 2012-2022 data

Question

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.

Whitsunday

Answer 1

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'

Whitsunday

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(). – Mordacious