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
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.
To change theme language dynamically we can use i18n.locale.value
property.
Import useI18n function form vue-i18n
import { useI18n } from "vue-i18n";
Get i18n instance using useI18n function
const i18n = useI18n();
Set i18n.locale.value property with language you want to use.
i18n.locale.value = "fr";
Translation usage inside component
Get t from the useI18n function which we have
imported in
a previous
section.
const { t } = useI18n();
Use t function inside template section, t
function receives a
translation key as a parameter and returns translation value depending on current
i18n.local.