Vue Academy · Lesson

useI18n Composable and t() Function

useI18n(), t('key'), $t in templates, locale.value switching, locale detection.

useI18n Composable and t() Function is a free Vue Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Translating in script setup

In Composition API mode, components reach translation tools through the useI18n() composable. It returns the t function and a reactive locale ref, among others.

Calling useI18n

Call useI18n() inside <script setup> and destructure what you need.

import { useI18n } from "vue-i18n"

const { t, locale } = useI18n()

The t Function

t(key) returns the translated string for the active locale. It is the script-side equivalent of $t in templates.

const { t } = useI18n()

const title = t("greeting") // "Hello" when locale is en

Interpolation with t

Pass an object of named values as the second argument to fill placeholders, exactly like in templates.

const { t } = useI18n()

const msg = t("welcome", { name: "Alice" })
// message "Welcome, {name}!" => "Welcome, Alice!"

Using t for Dynamic Strings

Because t is a plain function, you can use it anywhere in script logic — building toast messages, computed labels, or validation text.

import { computed } from "vue"
const { t } = useI18n()

const label = computed(() => t("nav.home"))

The locale Ref

locale is a reactive ref holding the current language code. Reading it tells you the active language.

const { locale } = useI18n()
console.log(locale.value) // "en"

Switching Language Globally

Assigning to locale.value changes the active language for the whole app. Every t call and $t in templates re-renders with the new language reactively.

function switchToTurkish() {
  locale.value = "tr"
}
// All translated text updates automatically.

A Language Switcher

A simple switcher binds a select to locale. Because it is reactive, choosing an option flips the entire UI instantly.

<template>
  <select v-model="locale">
    <option value="en">English</option>
    <option value="tr">Turkce</option>
  </select>
</template>

<script setup>
import { useI18n } from "vue-i18n"
const { locale } = useI18n()
</script>

$t vs t

They do the same thing in two contexts:

$t — auto-available in templates, no import.
t — from useI18n(), used in script and reactive logic.

Prefer t when computing strings in code.

Scoped vs Global Messages

useI18n() can take options to use component-local messages. With no options it uses the global instance — the common choice for app-wide translations.

const { t } = useI18n() // global messages

// component-scoped (advanced):
// const { t } = useI18n({
//   messages: { en: { ok: "OK" }, tr: { ok: "Tamam" } }
// })

Persisting the Choice

Language is a user preference, so persist it. Read a saved value on startup and write it whenever locale changes with a watcher.

import { watch } from "vue"
const { locale } = useI18n()

watch(locale, (val) => localStorage.setItem("lang", val))

Quick Check

Check your understanding of useI18n.

Recap

You learned the runtime translation API:

useI18n() returns t and a reactive locale ref.
t(key) translates; t(key, { name }) interpolates placeholders.
Use t in script logic and computed values; use $t in templates.
Set locale.value to switch language globally and reactively.
Persist the choice with a watch on locale.

Frequently asked questions

Is the “useI18n Composable and t() Function” lesson free?

Yes — the full text of “useI18n Composable and t() Function” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “useI18n Composable and t() Function”?

useI18n(), t('key'), $t in templates, locale.value switching, locale detection. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “useI18n Composable and t() Function” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy