Internationalization with Vuetify

Question

I'm trying to make an app with multiple languages.

I did what the documentation says but it does not work.

this my code.

window.Vue = require('vue');
import Vuetify from './Vuetify/vuetify';
import en from './Vuetify/Lang/en/en.ts';
import es from './Vuetify/Lang/es/es.ts';
Vue.use(Vuetify, {
   lang: {
       locales: {
           es,
           en,
       },
       current: 'es'
   }
})
const app = new Vue({
   el: '#app',
   components: {
       "vue-landing": require('./components/ExampleComponent.vue'),
   },
   created() {
       this.$vuetify.lang.current = 'es'
   },
 }).$mount('#app');

In my component

<template>
    <v-content>
      {{ $vuetify.t('noDataText') }}
    </v-content>
</template>

Everything compiles normal without errors, but it does not translate anything. the results are always what I write within the function.

In this case what appears is

noDataText

Answer 1

Not sure, which version of vuetify.js you are using, but Spanish locale was added, as per this issue, in version 1.4.0 which is not yet released, may be that is the issue.

Update:

There is an error in vuetify translation document as logged in this issue, change your template to:

<template>
    <v-content>
      {{ $vuetify.t('$vuetify.noDataText') }}
    </v-content>
</template>

and it will fix your issue.

Online demo.

Answer 2

I would suggest you to use vue-i18n instead of what are u trying to do. I am using vue at work for enterprise projects and I can suggest you to use it. Here you an check docs vue-i18n. I am happy to answer your other questions if you have any about vue and it's plugins.

Answer 3

i find a method inside the lang object is the translator this work for me.

for example:

 {{$vuetify.lang.translator("enter key set in locales property")}} 

translate to your current locale.

Do not forget to import locales you need.

Answer 4

Change template to:

    <template>
        <v-content>
          {{ $vuetify.lang.t('$vuetify.noDataText') }}
        </v-content>
    </template>