[Vuejs]-Change moment locale on runtime globally (make Vue.prototype.moment reactive)

by

0👍

Globally changing the locale on Moment.js does not change the locale on existing moment instances. Even if it did, it would not trigger an update, as Vue is not keeping track of those changes.

I would suggest a different solution using a global mixin, with a method that sets the locale locally on a moment instance.

import Vue from 'vue';

Vue.mixin({
    methods: {
        formatDate (moment, format) {
            return moment
                .locale(this.$root.locale)
                .format(format);
        },
    },
});

export default new Vue({
    render: h => h(BaseApp),
    data: {
        locale: 'en'
    },
    methods: {
        changeLocale(locale) {
            this.locale = locale;
        }
    }
 });

Your inline template code remains equally readable. However, while fixing your problem, this is also a much more flexible solution that does not care where a moment instance is coming from.

<h1>{{ formatDate(day, 'ddd') }}</h1>

-2👍

Two-way data binding by VueJS. It's not moment problem.

var parent = new Vue({
  data: {
    a: 1
  }
})
// $addChild() is an instance method that allows you to
// programatically create a child instance.
var child = parent.$addChild({
  inherit: true,
  data: {
    b: 2
  }
})
console.log(child.a) // -> 1
console.log(child.b) // -> 2
parent.a = 3
console.log(child.a) // -> 3

Leave a comment