CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
Alberto Ortega
Alberto Ortega

Reputation: 161

Internationalization with Vuetify

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

Upvotes: 5

Views: 13784

Answers (4)

abolfazl maherani
abolfazl maherani

Reputation: 168

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.

Upvotes: 3

Ibukun
Ibukun

Reputation: 11

Change template to:

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

Upvotes: 1

Dipen Shah
Dipen Shah

Reputation: 26075

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.

Upvotes: 6

ali.turan
ali.turan

Reputation: 553

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.

Upvotes: 2

Related Questions