Vue Academy · Pelajaran

Composable useI18n dan Fungsi t()

useI18n(), t('key'), $t dalam template, pergantian locale.value, serta deteksi locale.

Composable useI18n dan Fungsi t() adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Menerjemahkan dalam Penyiapan Skrip

Dalam mode API Composition, komponen mengakses alat terjemahan melalui komposabel useI18n(). Komposabel ini mengembalikan fungsi t dan ref locale reaktif, serta beberapa nilai lainnya.

Memanggil useI18n

Panggil useI18n() di dalam <script setup> dan uraikan nilai yang Anda perlukan.

import { useI18n } from "vue-i18n"

const { t, locale } = useI18n()

Fungsi t

t(key) mengembalikan string terjemahan untuk lokal aktif. Fungsi ini merupakan padanan sisi skrip dari $t dalam templat.

const { t } = useI18n()

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

Interpolasi dengan t

Teruskan objek berisi nilai bernama sebagai argumen kedua untuk mengisi penanda tempat, persis seperti dalam templat.

const { t } = useI18n()

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

Menggunakan t untuk String Dinamis

Karena t adalah fungsi biasa, Anda dapat menggunakannya di mana saja dalam logika skrip — untuk membuat pesan notifikasi, label terhitung, atau teks validasi.

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

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

Ref Lokal

locale adalah ref reaktif yang menyimpan kode bahasa saat ini. Dengan membacanya, Anda dapat mengetahui bahasa aktif.

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

Mengganti Bahasa Secara Global

Menetapkan nilai locale.value mengubah bahasa aktif untuk seluruh app. Setiap pemanggilan t dan $t dalam templat dirender ulang secara reaktif menggunakan bahasa baru.

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

Pengalih Bahasa

Pengalih sederhana mengikat pilihan ke locale. Karena bersifat reaktif, pemilihan opsi akan segera mengubah seluruh antarmuka.

<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

Keduanya melakukan hal yang sama dalam dua konteks:

$t — tersedia otomatis dalam templat, tanpa impor.
t — berasal dari useI18n(), digunakan dalam skrip dan logika reaktif.

Utamakan t saat menghitung string dalam kode.

Pesan Berdasarkan Cakupan vs Global

useI18n() dapat menerima opsi untuk menggunakan pesan lokal komponen. Tanpa opsi, komposabel ini menggunakan instans global — pilihan umum untuk terjemahan seluruh app.

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

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

Menyimpan Pilihan

Bahasa merupakan preferensi pengguna, jadi simpanlah. Baca nilai yang tersimpan saat memulai dan tulis ulang setiap kali locale berubah menggunakan pengamat.

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

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

Pemeriksaan Singkat

Periksa pemahaman Anda tentang useI18n.

Rangkuman

Anda telah mempelajari API terjemahan saat runtime:

useI18n() mengembalikan t dan ref locale reaktif.
t(key) menerjemahkan; t(key, { name }) menginterpolasi penanda tempat.
Gunakan t dalam logika skrip dan nilai terhitung; gunakan $t dalam templat.
Tetapkan locale.value untuk mengganti bahasa secara global dan reaktif.
Simpan pilihan dengan watch pada locale.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Composable useI18n dan Fungsi t()” gratis?

Ya — teks lengkap “Composable useI18n dan Fungsi t()” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Composable useI18n dan Fungsi t()”?

useI18n(), t('key'), $t dalam template, pergantian locale.value, serta deteksi locale. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Composable useI18n dan Fungsi t()” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Menyiapkan vue-i18n dan File Pesan
Composable useI18n dan Fungsi t()
Pluralisasi dan Pesan Tertaut
Pemformatan Angka, Tanggal, dan Mata Uang

← Kembali ke Vue Academy