CODEWITHSUNDEEP
vue.jsvuejs2vuetify.jsvue-i18n
Basti G.
Basti G.

Reputation: 441

vue-i18n not use vuetify components strings

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: enter image description here

And other components also not working.

What i do wrong?

Upvotes: 3

Views: 2387

Answers (3)

Pouya M
Pouya M

Reputation: 385

Update for Vuetify 3 and above + if using vue-i18n: docs

If you are using the vue-i18n library, you can very easily integrate it with Vuetify. This allows you to keep all of your translations in one place. Simply create an entry for $vuetify within your messages and add the corresponding language changes. Then hook up vue-i18n to Vuetify by using the provided adapter function (as seen in the example below).

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
import { createI18n, useI18n } from 'vue-i18n'
import { en, sv } from 'vuetify/locale'

const messages = {
  en: {
    $vuetify: {
      ...en,
      dataIterator: {
        rowsPerPageText: 'Items per page:',
        pageText: '{0}-{1} of {2}',
      },
    },
  },
  sv: {
    $vuetify: {
      ...sv,
      dataIterator: {
        rowsPerPageText: 'Element per sida:',
        pageText: '{0}-{1} av {2}',
      },
    },
  },
}

const i18n = createI18n({
  legacy: false, // Vuetify does not support the legacy mode of vue-i18n
  locale: 'sv',
  fallbackLocale: 'en',
  messages,
})

const vuetify = createVuetify({
  locale: {
    adapter: createVueI18nAdapter({ i18n, useI18n }),
  },
})

const app = createApp()

app.use(i18n)
app.use(vuetify)

app.mount('#app')

Upvotes: 0

Jakob Miksch
Jakob Miksch

Reputation: 173

In my setup using Vue3 and vuetify I could fix it with this:

import { createI18n } from "vue-i18n"
import { de as vuetifyDe, en as vuetifyEn } from "vuetify/locale"
import customDe from "./de.json"

export const i18n = createI18n({
  legacy: false,
  locale: "de",
  fallbackLocale: "en",
  messages: {
    de: {
      // we add the vuetify locales to our locale to prevent warnings in the console
      $vuetify: vuetifyDe,
      ...customDe,
    },
    en: {
      // we add the vuetify locales to our locale to prevent warnings in the console
      $vuetify: vuetifyEn,
    },
  },
})

Upvotes: 3

Sina
Sina

Reputation: 1135

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}",
    },
  }
};

Upvotes: 3

Related Questions