i try to use vue-i18n to translate my application. I use also vuetify and the vue cli.
At the moment i have the languages englisch and german. Here is my project structure and code.
main.js
import Vue from "vue";
import i18n from "./plugins/i18n";
import vuetify from "./plugins/vuetify";
Vue.config.productionTip = false;
new Vue({
vuetify,
i18n,
render: (h) => h(App),
}).$mount("#app");
plugins/i18n.js
import Vue from "vue";
import VueI18n from "vue-i18n";
import de from "@/locale/de";
import en from "@/locale/en";
Vue.use(VueI18n);
const messages = {
de: de,
en: en,
};
const i18n = new VueI18n({
locale: "de",
fallbackLocale: "en",
messages,
});
export default i18n;
locale/en.js
export default {
hello: "hello",
};
locale/de.js
export default {
hello: "Hallo",
$vuetify: {
dataIterator: {
rowsPerPageText: "Einträge pro Seite:",
pageText: "{0}-{1} von {2}",
},
}
};
plugins/vuetify.js
import Vue from "vue";
import Vuetify from "vuetify/lib/framework";
import i18n from "./i18n";
Vue.use(Vuetify);
export default new Vuetify({
lang: {
t: (key, ...params) => i18n.t(key, params),
},
});
All works fine with the hello
translation, but the vuetify components not working as expected.
I would like to add a translation to german for few vuetify components in the future.
But at the moment a would like to use the original names from vuetify. And that is not working.
For example, the v-select component looks like:
And other components also not working.
What i do wrong?
You are missing default vuetify component locales. you should provide it by rewriting them in your locales or import it at the beginning of each locale file.
locale/en.js
import { en } from 'vuetify/lib/locale'
export default {
$vuetify: { ...en },
hello: "hello",
};
locale/de.js
import { de } from 'vuetify/lib/locale'
export default {
hello: "Hallo",
$vuetify: {
...de,
dataIterator: {
rowsPerPageText: "Einträge pro Seite:",
pageText: "{0}-{1} von {2}",
},
}
};