CODEWITHSUNDEEP
vue.jsvuetify.jsvue-i18n
Baspa
Baspa

Reputation: 1168

Use both Vuetify and Vue-i18n translations

I am using Vuetify and want to add my own translations for buttons for example and also use the translations provided by Vuetify. I currently have my Vuetify config file setup like this:

import Vue from "vue"
import Vuetify from "vuetify"
import "vuetify/dist/vuetify.min.css"
import "@fortawesome/fontawesome-free/css/all.css"
import VueI18n from "vue-i18n"
import messages from "./i18n"

import en from 'vuetify/es5/locale/en'
import nl from 'vuetify/es5/locale/nl'

Vue.use(Vuetify)
Vue.use(VueI18n)

const locale = navigator.language

const i18n = new VueI18n({
    locale: locale,
    messages: messages,
})

export default new Vuetify({
    theme: {
        themes: {
            light: {
                primary: "#8BC34A",
                secondary: "#627ACC"
            }
        }
    },
    icons: {
        iconfont: "fa",
    },
    lang: {
        locales: { en, nl },
        current: locale,
        t: (key, ...params) => i18n.t(key, params),
    },
});

My locale is set to nl, but also when I set it to en it gives me the following errors:

Value of key '$vuetify.noDataText' is not a string! Cannot translate

the value of keypath '$vuetify.noDataText'. Use the value of keypath as default.

But when I add the Vuetify translation messages to my i18n file it works:

const messages = {
    en: {
        $vuetify: {
            noDataText: 'No data available',
        },
 }

But in an ideal situation I would like to separate the Vuetify translations, Dutch custom translations and English custom translations in different files. Could someone please help me find out how I can separate the translation logic?

Upvotes: 2

Views: 5380

Answers (2)

f-CJ
f-CJ

Reputation: 4481

The variable messages that you are passing to the VueI18n constructor is just an object and as such you can compose it the way you want. You can compose it from multiple files, so you could have something like this in your i18n file:

import en from './locales/en;
import nl from './locales/nl';

export default {
  en,
  nl
}

Your locales/en.js might look something like this:

import $vuetify from './locales/en_vuetify';

export default {
  //Your english translations
  'foo1': 'foo1',
  // Your english vuetify translations
  $vuetify
}

And your locales/en_vuetify.js like this:

import enVuetify from 'vuetify/es5/locale/en'

export default {
  // These are the default vuetify translations
  ...enVuetify,
  // Here you write your custom vuetify translations that will override the default ones
  'custom1': 'whatever'
}

And in your Vuetify configuration object, you can leave the lang property just like this:

lang: {
  t: (key, ...params) => i18n.t(key, params),
},

This way it is vue-i18n the only one who takes care of the translations.

Upvotes: 2

Kael Watts-Deuchar
Kael Watts-Deuchar

Reputation: 4481

If you aren't customising vuetify's translations in vue-i18n then you don't need to integrate it. You can use vue-i18n the usual way for your own strings in your components and leave off lang.t in the vuetify options.

Upvotes: 3

Related Questions