Internationalization with Vuetify

5
votes

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

3
vue.jsvuejs2vuetify.js
Does it work for you if you set the language to English?this.$vuetify.lang.current = 'en' – C-Jay
It does not work but use i18n outside the instance and it worked – Alberto Ortega

3 Answers

6
votes

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.

2
votes

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.

1
votes

Change template to:

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