Vue Academy · Lesson

useI18n Composable and t() Function

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

Lesson 2 of 413 steps

useI18n Composable and t() Function is a free Vue Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 42
Lessons: 156

Start learning free View the full course

Frequently Asked Questions

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

Yes — any 3 lessons of the Vue Academy learning path, including “useI18n Composable and t() Function”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

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