How to use vue-i18n translate function in script part of component

Question

I'm using laravel-vue-i18n-generator package to handle text translation in vuejs component in my laravel project. I've set up app.js like below:

import VueInternationalization from 'vue-i18n';
import Locale from './vue-i18n-locales.generated';

Vue.use(VueInternationalization);

const lang = 'fa';

const i18n = new VueInternationalization({
    locale: lang,
    messages: Locale
});

const app = new Vue({
    el: '#app',
    i18n,
});

And in component:

<template>

    <a href="#" class="tip" title="" :title="$t('component.delete.title')" @click.prevent="deleteAction">
        <i :class="icon"></i>
    </a>
</template>

<script>
    import swal from 'sweetalert';
    import axios from 'axios';

    export default {
        inject: ['$i18n'],
        props:{
            endpoint: {
                type: String,
                required: true,
            },
            icon: {
                type: String,
                default: 'fa fa-trash'
            },
            message: {
                type: String,
                default:  this.$i18n.t('component.delete.are_you_sure'),
            },
            confirm: {
                type: String,
                default:  this.$i18n.t('component.delete.confirm'),
            },
            cancel: {
                type: String,
                default:  this.$i18n.t('component.delete.cancel'),
            },
            success: {
                type: String,
                default:  this.$i18n.t('component.delete.success'),
            },
            failed: {
                type: String,
                default:  this.$i18n.t('component.delete.failed'),
            },
        },
        mounted() {
            console.log(this);
        },
        methods:{
            deleteAction(){
                const vm = this;
                swal({
                    text: this.message,
                    buttons: {
                        catch: {
                            text: this.confirm,
                            value: "delete",
                        },
                        cancel: this.cancel
                    },
                    dangerMode: true
                }).then(name => {
                    if (!name) return false;

                    axios.delete(vm.endpoint)
                        .then(function (response) {
                            swal( vm.$i18n.t('component.delete.congrats'),vm.success, 'success').then(() => {
                                location.reload();
                            });
                        })
                        .catch(function (error) {
                            swal( vm.$i18n.t('component.delete.error'), vm.failed, 'error');
                        });
                });
            }
        }

    }
</script>

<style scoped>

</style>

Fortunately $t('component.delete.title') works correctly on template part, but in script part, I've got this error:

Uncaught TypeError: Cannot read property 't' of undefined

Where do I go wrong?

score 13 · Answer 1 · answered Feb 12 '20 at 02:02

13

This worked for me inside the script part of a component:

this.$t('message')

answered Feb 12 '20 at 02:02

gitaarik

42,736
12
98
105

score 1 · Answer 2 · answered May 29 '19 at 08:15

1

This works for me.

I have a locales folder with index.js importing the two language files im using, in this file add.

global.$t = Vue.t

Referred to in the script part directly as

return $t('backend.faq.main')

answered May 29 '19 at 08:15

Abarth

176
1
11

score 1 · Accepted Answer · answered Apr 16 '20 at 17:36

In vue.js if you get an error like

"_vm.translate is not a function" It is most probably that you havent import the i18n package which contains translate method.This error occures sometimes when you try to add translate using v-bind to html attributes. Example:

 <a-form-item class="mb-0" :label="`${translate('person_name.firstname')}`">

following steps can solve the error.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script lang="ts">
import { translate, i18n } from '@/i18n';

@Component({
  components: {
    AgIconBase
  },
 methods:{
   translate
   }
})
</script>

it'Simon · Answer 4 · 2023-05-29T08:40:12.730

I just had a similar problem where i couldn't get the values of my i18n.js. My setup is a i18n.js file with the createI18n function where i enter some messages:

import { createI18n } from "vue-i18n";

const i18n = createI18n({
    locale: "en",
    messages:{
        en:{
            // LOGIN //
            signIn: "Sign in",

        },
    }
});

export default i18n;

And inside my main.js i import the file and use it (app.use(i18n))

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import store from './store'
import i18n from './locales/i18n'

window.$store = store

const app = createApp(App)

app.use(router)
app.use(i18n)
app.use(store)

app.mount('#app')

Inside the component i imported the file too. And then i call the values with i18n.global.t('keyname')

import { onMounted, ref } from 'vue'
import i18n from '../locales/i18n'

export default {
    name: 'WebRTC',
    setup(){
    console.log(i18n.global.t('incomingCall'))
    }
}

How to use vue-i18n translate function in script part of component

4 Answers4