What is $t() in Vue?

The $t function is part of the Vue-i18n library, and it is used to translate text in a Vue.js application. It works by looking up a translation key in a language file, and returning the translated text associated with that key.

How to translate your Vue.js 3 application with vue i18n

Free tutorial: Set up Vue.js with vue-i18n. Translate your templates, create and edit json translation files, switch translations at runtime. Covers Vue 3.

Read now →

For example, if you have a language file that contains the following:

locales/fr.json

{
    "hello": "Bonjour"
}

You can use the $t function to translate the key "hello" like this:

<template>
    <div>{{ $t("hello") }}</div>
</template>

In this example, the $t function will return "Bonjour". The language file and the translation keys can be customized to meet the needs of your application.

The $t function also takes additional parameters that you can use inside the translation messages - e.g. to pass a name or other values.

See our tutorial How to translate your Vue.js application with vue-i18n for an in-depth description of how to use vue-i18n.