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

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>

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15 (4 by maintainers)

Most upvoted comments

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.

+46

mawalu on Apr 9, 2017

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

i18n v6.0.0 -alpha.1

+14

bestkj on Feb 25, 2017

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

centrual on Feb 23, 2017

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')
         }
    }
}

razbakov on Feb 26, 2018

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.

JD-V on May 31, 2018

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

kazupon on Apr 10, 2017

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

leo108 on Feb 19, 2017