vuejs2momentjsmixing

How to use moment format in mixing?


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!


Solution

  • 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