Vue-i18n: `$t` undefined in `.vue` file

[leo108]

vue & vue-i18n version

ex: 2.1.4, 5.0.1

Steps to reproduce

Everything works fine if I define the component directly:

Vue.component('form-builder', {
   mounted: function() {
    console.log(this.$t); // this will output the function's source code
  }
});

but if I change this to

Vue.component('form-builder', require('./test.vue'));

and the content of the test.vue is

<template>
    <div>

    </div>
</template>
<style>

</style>
<script>
    export default {
        mounted: function() {
            console.log(this.$t); // it says undefined
        },
    }
</script>

[kazupon]

Thank you for your feedback.

Hmm, I could not reproduce this issue.
Can you provide the minimum repo please?

[leo108]

@kazupon

https://github.com/leo108/vue-i18n-bug-reproduction

the reproduce steps are in readme file

ps: use i18n v5.0.2 and node v5.12 has the same issue

[kazupon]

Hmm, I think vue-loader have this issue.
vue-i18n define $t as the Vue method (Vue.prototype.$t).
I don't believe that this problem is caused by it.

Could you open this issue in vue-loader please?

[leo108]

@kazupon I don't know the detail of this issue, could you help me to ask them?

[centrual]

Same issue here:
node 7.5.0 - latest version of dependencies.

this.$t is undefined in data
Uncaught TypeError: this.$t is not a function

[bestkj]

this.$t is not a function this same issue here.

i18n v6.0.0 -alpha.1

[LinusBorg]

That reproduction is strange. Why do you include a local copy of vue in index.html?

The issue here is probably that you register vue-18n with the Vue object from index.html (vue.min.js), but vue-loader uses what you defined in the webpack config: vue.common.js for hot reloading.

Those are two different files, resulting in two different Vue objects, and only one has vue-18n registered.

(since this problem is connected to hot module reloading, it would not happen in production as well).

[mawalu]

I solved the problem by using this.$i18n.t() to translate strings in my data function. Maybe this is useful for the others who are having similar issues.

[kazupon]

related:
https://github.com/kazupon/vue-i18n/issues/119#issuecomment-284198547

sorry, I'll try to write to docs later.

[kazupon]

Close due to inactivity

[razbakov]

I had a problem in mixin:

export default {
    data: {
         myProperty: this.$t('propertyName')
    }
}

I fixed the problem by using computed field:

export default {
    computed: {
         myProperty: function () {
             return this.$t('propertyName')
         }
    }
}

[JD-V]

The reason behind this is $t is not available when your app is being loaded, that is why you can't use it in data() as $t('xx'), you however have two option here, either you update your variables after your app has been loaded inside mounted method
mounted() { myProp = this.i18n.t('xx_str') },

or you can declare your variables in computed block instead of data block. Just like the answer above.

[Meklad]

I solved the problem by using this.$i18n.t() to translate strings in my data function. Maybe this is useful for the others who are having similar issues.

This solution works for me :)

[adamsimonini]

@mawalu, u r a god

[tr00ks]

I had same $t is undefined error as OP, but I was trying to access $t in the props attribute for setting default value in the prop validation. I'm not sure how it would differ from data attribute, still learning the nuances of it all. But the link below was the solution that helped me, leaving it here if it helps anyone else.

https://stackoverflow.com/questions/57171720/access-this-vm-instance-from-props-default-vuejs