Documentation v8.2.9

Downloads Preview

Overview

Vue I18n is internationalization plugin of Vue.js. It easily integrates some localization features to your Vue.js Application. Plugin tranlation keys are defined in src/core/plugins/i18n.ts.

Additing new language with translation keys

  1. To support new language we should add new object property to messages in file src/core/plugins/i18n.ts, object key is language code and value is object with translation keys.
    const messages = {
        en: {
        dashboard: "Dashboard"
        },
        es: {
        dashboard: "Tablero",
        },
        de: {
        dashboard: "Instrumententafel",
        },
        ja: {
        dashboard: "ダッシュボード",
        },
    +   fr: {
    +     dashboard: "Générateur de mise",
    +   }
    };

Switching language dynamically

To change theme language dynamically we can use i18n.locale.value property.
  1. Import useI18n function form vue-i18n
    import { useI18n } from "vue-i18n";
  2. Get i18n instance using useI18n function
    const i18n = useI18n();
  3. Set i18n.locale.value property with language you want to use.
    i18n.locale.value = "fr";

Translation usage inside component

  1. Get t from the useI18n function which we have imported in a previous section.
    const { t } = useI18n();
  2. Use t function inside template section, t function receives a translation key as a parameter and returns translation value depending on current i18n.local.
    {{ t("dashboard") }}
Preview Get Help Buy Now