How to use moment format in mixing?

Question

In my laravel 5.7 / vuejs 2.5 app I use moment library to format datetime from db It works in my component, but I have error when I try to wrap moment in my mixing as function with parameters. package.json:

{
    "private": true,
    "devDependencies": {
        "axios": "^0.18",
        "vue": "^2.5.17"
    ...
    },
    "dependencies": {
        "vue-moment": "^4.0.0",
        "vue-router": "^3.0.1",
        "vuex": "^3.0.1"
    ...
    }
}

In resources/js/app.js :

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

In my component :

<template>
    ...
        <hr>
        <!-- THIS LINE WORKS OK-->
         <span>{{ nextCategory.created_at | moment("dddd, MMMM Do YYYY") }}</span>;
        <hr>
        <!-- {{ momentDatetime(nextCategory.created_at,'Do MMMM, YYYY h:mm:ss A') }} -->

     ...
</template>
<script>
    import {bus} from '../../app';
    import appMixin from '../../appMixin';

    export default {
        name: 'list',
        mixins: [appMixin],


</script>

But if to uncomment last line I got error

[Vue warn]: Error in render: "TypeError: __WEBPACK_IMPORTED_MODULE_0_vue_moment___default(...) is not a function"

and in resources/js/appMixin.js :

import moment from 'vue-moment'
export default {

    methods: {

        ...
        momentDatetime(datetime, datetime_format, default_val) {
            return moment(datetime).format(datetime_format);
        },
        ...

I found this decison with “.format” method in net, but looks like it is invalid. Which is the right way ?

Thanks!

score 1 · Answer 1 · edited Dec 15 '18 at 09:35

1

You are using vue-moment instead of moment, so in your package.json add moment by running in your terminal npm install moment or yarn add moment, and then in your package.json you should see moment dependency

Also change the import in the mixin to import moment from 'moment'

edited Dec 15 '18 at 09:35

Walter Cejas

1,924
1
12
22

answered Dec 15 '18 at 08:27

Dhsjansmsmwm

11
2

score 1 · Accepted Answer · answered Dec 15 '18 at 08:57

Maybe like the other answer, you have to use moment instead of vue-moment.

Also there's a problem with the latest version of moment and one of the solutions posted here was downgrading to moment 2.18.1, maybe vue-moment is using another version.

Check this post with the same error as your question: https://github.com/moment/moment/issues/4229

Also they reference this other issue: https://github.com/moment/moment/issues/4216

How to use moment format in mixing?

2 Answers2