Logo

Documentation v8.2.4

  • Home
  • Internationalization (i18n)
Downloads Preview
Light
Dark
System

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