"ReferenceError: moment is not defined"

[paddelboot]

I'm wondering how people are getting this to work. I am building an app with Laravel and Vue.

In my app.js I import Moment:

import Moment from 'vue-moment';
Vue.use( Moment );

Then in my component:

    methods : {

        date : function( timestamp ) {

            return moment( timestamp );

        }

    }

Which results in:

"ReferenceError: moment is not defined"

I also tried Vue.use(require('vue-moment')); and different combinations of upper/lowercase. Any clue?

[paddelboot]

It seems that this package is not working as intended.

I followed @michealjroberts advice and went back to using vanilla moment.js. At least now I can return some formatted timestamp.

[BrockReece]

The moment instance is added to the prototype of a Vue and so can be accessed like this in your Vue component.

methods : {
  date(timestamp) {
    return this.$moment( timestamp )
  }
}

This is explained at the bottom of the readme and should still be working as intended.
https://github.com/brockpetrie/vue-moment#thismoment

But if all you need is to return some formatted timestamps and not use any of the additional filter functionality, it sounds like using vanila moment.js will probably work best for you.

[paddelboot]

I suggest you update the usage examples at the beginning of the doc, which currently only explains <template> scenarios. Because honestly I didn't read it all the way to the bottom.

[BrockReece]

Ok, thanks for the suggestion.

I would say though this package was built to provide "Handy Moment.js filters for your Vue.js project" (the first line of the readme) and as filters are exclusively used within the <template> scenarios, the docs focus on those use cases.

The use case that you have is covered by this package but as you say, this package wouldn't offer any more value than using vanilla moment.js.

The reason that I pointed to the docs was in response to your line...

It seems that this package is not working as intended.

... as the code I provided is the intended and documented behaviour and anyone stumbling across this issue would be directed to the correct place.

[ejntaylor]

In light of what you mention above, how would I refactor the following code to work in a component:

{{ marker.created_at | moment("dddd, MMMM Do YYYY") }}

[BrockReece]

Sorry I wasn't sure which part of the thread you were referring to, so I have answered from a couple of different perspectives.

Using vue-moment
As this package proxies your moment instance to this.$moment, you can use any moment methods in your component.

For your example above, this should do the trick...

this.$moment(this.marker.created_at).format('dddd, MMMM Do YYYY')

Vanilla moment.js
If you wanted to refactor to remove vue-moment and use vanilla moment.js, you will need to import moment at the top of your component.

import moment from 'moment'

and then you can use moment methods in that component

moment(this.marker.created_at).format('dddd, MMMM Do YYYY')

I hope that helps.

[fairking]

@BrockReece The moment instance is added to the prototype of a Vue and so can be accessed like this in your Vue component.

I don't think so. After I registered the moment:

import VueMoment from "vue-moment";
Vue.use(VueMoment);

In the following method TimelineChartDemo.vue:

methods: {
    onSelect(selected: any) {
            this.message = this.$moment().locale() + " " + "Selected";
            console.log(selected);
        },

I have the following error:

ERROR in C:/Code/MyProject/src/views/charts/TimelineChartDemo.vue(299,33):
299:33 Property '$moment' does not exist on type 'CombinedVueInstance<Vue, { data: PointsData[]; data2: PointsData[]; chartOptions: TimelineOptions; message: string; }, { labelFunctionCustom(value: any): string; ... 5 more ...; updateData(): void; }, unknown, Readonly<...>>'.
    297 |         },
    298 |         onSelect(selected: any) {
  > 299 |             this.message = this.$moment().locale() + " " + "Selected";
        |                                 ^
    300 |             console.log(selected);
    301 |         },
    302 |         onAreaClick(evt: PointerEvent) {
Version: typescript 4.4.4
Time: 2118ms

If I type this. I have nothing related to the $moment:

This plugin is not working as expected.

[BrockReece]

Is this a type error, as opposed to a runtime error?
I don't think this package provides TS definitions.
It might be something I can add though?

[fairking]

Is this a type error

I guess it's a TS error (build error).

I found there is @types/vue-moment which enables types.
The documentation is missing this step npm install @types/vue-moment --save-dev.

If this module can provide vue-moment.d.ts, the @types module is not required then.

[BrockReece]

@fairking I have updated the readme in #163 while I test including the type definitions as part of this package

[fairking]

Thank you a lot. 👍
At the beginning I thought it was a moment issue, but now I understand in order to make the build work in TS project the extra @types/vue-moment required in devDependencies.

Please feel free to close the issue.