Cara Memilih Library Vue i18n yang Tepat

"Vue i18n" adalah istilah umum sekaligus nama library yang dipasang oleh hampir semua orang. Hal ini praktis sekaligus menyesatkan pada saat yang sama: vue-i18n adalah opsi default yang bagus, tetapi bukan satu-satunya pilihan, dan pertanyaan yang seharusnya mendasari keputusan tersebut (SSR atau tidak, berapa banyak halaman, siapa yang menulis terjemahan) jarang diajukan sebelum menjalankan npm install.

Panduan ini membahas pertanyaan-pertanyaan tersebut terlebih dahulu, lalu memetakan jawabannya ke library yang sesuai, baik untuk Vite + Vue murni maupun untuk Nuxt.

Daftar Isi

Enam pertanyaan yang perlu dijawab sebelum membandingkan library

1. Vite SPA atau Nuxt? Pada SPA, biaya katalog adalah masalah JS bundle. Pada Nuxt, ini juga merupakan masalah payload HTML, karena pesan diserialisasi ke dalam state SSR dan dihidrasi. Sebagian besar laporan "vue-i18n lambat" berasal dari aplikasi Nuxt karena alasan ini.
2. Siapa yang menulis terjemahan? Developer, TMS, agensi yang menyediakan format ICU string, atau pipeline AI. vue-i18n menggunakan sintaks plural sendiri yang dipisahkan oleh karakter pipa (pipe), bukan ICU. Hal ini penting jika string berasal dari pihak eksternal.
3. Berapa banyak locale dan halaman? Dua locale dan lima halaman dapat memuat semuanya sekaligus. Sepuluh locale dan empat puluh route tidak bisa, dan strategi pemuatan (loading strategy) menjadi biaya utama.
4. Apakah Anda memerlukan type safety pada keys? t("cart.totl") akan tetap ter-compile di vue-i18n kecuali Anda menyertakan generic message schema, dan skema tersebut sering bermasalah dengan katalog yang dimuat secara lazy (lazily loaded).
5. Apa saja isi kontennya? Hanya label UI, atau markdown, tautan di tengah kalimat, dan blok per-locale. Konten kaya (rich content) adalah bagian di mana t() yang mengembalikan string terasa canggung.
6. Apakah CSP menjadi batasan? Build default vue-i18n meng-compile pesan di browser menggunakan new Function. Build runtime-only membutuhkan @intlify/unplugin-vue-i18n untuk melakukan precompile pada saat build time.

Catat jawabannya. Semua pembahasan di bawah ini akan merujuk kembali ke poin-poin tersebut.

Lanskap dalam satu gambaran

Ekosistem Vue memiliki lebih sedikit library i18n dibandingkan React, dan mereka berasal dari gelombang arsitektur yang berbeda.

Artikel sejarah JavaScript i18n membahas setiap gelombang arsitektur ini secara mendalam.

Keputusan yang paling penting: di mana konten berada dan kapan dimuat

Dua pilihan struktural menjelaskan sebagian besar perbedaan ukuran bundle antar konfigurasi:

• Centralized atau scoped content. Satu file locales/en.json untuk seluruh aplikasi, atau satu deklarasi per komponen.
• Static atau dynamic import. Memuat semuanya saat startup, atau hanya memuat locale yang aktif (dan idealnya route yang aktif) sesuai permintaan (on demand).

Grafik berikut memperkirakan payload untuk aplikasi teoritis dengan 1 hingga 10 halaman, diterjemahkan ke dalam 1 hingga 10 locale, dengan sekitar 30 KB teks per halaman.

vue-i18n mendukung sumbu dinamis: setLocaleMessage setelah import() berarti Anda berhenti mengirim sembilan locale yang tidak dibaca siapa pun. Namun, yang tidak diberikannya adalah pemisahan berdasarkan halaman. Katalog locale adalah satu objek tunggal, dan memuatnya berarti memuat seluruh teks setiap halaman. Dalam SPA, tidak ada yang menyadarinya. Di Nuxt, dengan @nuxtjs/i18n dan lebih dari sepuluh halaman, setiap route membawa string dari setiap route lainnya, dua kali lipat: di dalam chunk JS dan di dalam SSR payload.

Benchmark Vue mengukur hal ini sebagai "kebocoran dari route lain" dan "kebocoran dari locale lain". Jika jawaban Anda untuk pertanyaan 3 adalah "banyak halaman", bagian ini lebih penting daripada preferensi API mana pun. Artikel per-component vs centralized i18n membahas sisi pemeliharaan dari trade-off yang sama.

Kandidat library

Ukuran library diambil dari benchmark Vue: plugin ditambah composable dalam komponen kosong, setelah proses bundling, tree-shaking, dan minifikasi, pada aplikasi 10 halaman dan 10 locale. Konten diukur secara terpisah.

Angka-angka tersebut merupakan gambaran pada versi saat benchmark dilakukan. Jalankan pengujian pada aplikasi Anda sendiri sebelum memutuskan hanya berdasarkan ukuran.

Ukuran library Paraglide yang mendekati nol dicapai melalui konstruksinya: runtime di-generate langsung ke dalam repositori Anda, yang berarti diperlukan langkah regenerasi sebelum setiap push dan potensi konflik merge pada file yang di-generate. Intlayer memerlukan vite-intlayer (atau modul Nuxt), sehingga tidak dapat berjalan tanpa langkah build.

Sesuaikan jawaban Anda dengan library

Di mana kekurangan masing-masing library

• vue-i18n: yang paling berat di antara semuanya, format plural milik sendiri, types bersifat opt-in dan rentan bermasalah dengan lazy loading, tidak ada pembatasan per-route, key yang tidak terpakai menumpuk tanpa disadari. Membiarkan legacy: true di aplikasi Vue 3 tetap mempertahankan lapisan kompatibilitas Vue 2 dan menghilangkan typing untuk useI18n().
• @nuxtjs/i18n: mewarisi semua kekurangan di atas, dan SSR payload membawa string setiap halaman setelah melewati belasan route.
• fluent-vue: sintaks pesan yang bagus, tidak ada type safety pada keys, dan plugin Vite memuat semua konten dalam semua bahasa ke dalam setiap halaman. Paling berat dalam benchmark.
• Paraglide: file hasil generate di-commit ke repositori, memerlukan regenerasi sebelum setiap push, dan locale dibaca dari cookie atau storage pada setiap pemanggilan pesan alih-alih dari reactive store, yang membutuhkan biaya komputasi tambahan saat pergantian locale.
• Intlayer: plugin build wajib, ekosistem lebih kecil, dukungan ICU parsial, dan konten tersebar di seluruh codebase secara terstruktur, sehingga mengekspor satu file JSON untuk penerjemah membutuhkan tooling tambahan.

Seperti apa tampilan setiap opsi dalam kode

Komponen yang sama, ringkasan keranjang belanja dengan judul dan bentuk plural, ditulis menggunakan masing-masing kandidat. Bagian yang menarik bukanlah template-nya, melainkan di mana konten berada dan apa yang diketahui vue-tsc tentangnya.

{
  "cart": {
    "title": "Your cart",
    "items": "no item | one item | {count} items"
  }
}

<script setup lang="ts">
import { useI18n } from "vue-i18n";

const props = defineProps<{ count: number }>();
const { t } = useI18n();
</script>

<template>
  <section>
    <h2>{{ t("cart.title") }}</h2>
    <p>{{ t("cart.items", { count: props.count }, props.count) }}</p>
  </section>
</template>

cart-title = Your cart
cart-items = { $count ->
    [one] { $count } item
   *[other] { $count } items
}

<script setup lang="ts">
import { useFluent } from "fluent-vue";

const props = defineProps<{ count: number }>();
const { $t } = useFluent();
</script>

<template>
  <section>
    <h2>{{ $t("cart-title") }}</h2>
    <p>{{ $t("cart-items", { count: props.count }) }}</p>
  </section>
</template>

{
  "cart_title": "Your cart",
  "cart_items": "{count} items"
}

<script setup lang="ts">
import { m } from "../paraglide/messages.js";

const props = defineProps<{ count: number }>();
</script>

<template>
  <section>
    <h2>{{ m.cart_title() }}</h2>
    <p>{{ m.cart_items({ count: props.count }) }}</p>
  </section>
</template>

import { plural, t, type Dictionary } from "intlayer";

const cartSummaryContent = {
  key: "cart-summary",
  content: {
    title: t({ en: "Your cart", fr: "Votre panier", es: "Tu carrito" }),
    items: t({
      en: plural({ one: "{{count}} item", other: "{{count}} items" }),
      fr: plural({ one: "{{count}} article", other: "{{count}} articles" }),
      es: plural({ one: "{{count}} artículo", other: "{{count}} artículos" }),
    }),
  },
} satisfies Dictionary;

export default cartSummaryContent;

<script setup lang="ts">
import { useIntlayer } from "vue-intlayer";

const props = defineProps<{ count: number }>();
const { title, items } = useIntlayer("cart-summary");
</script>

<template>
  <section>
    <h2><title /></h2>
    <p>{{ items(props.count) }}</p>
  </section>
</template>

Sudah menggunakan vue-i18n? Compat adapter @intlayer/vue-i18n membuat alias untuk package tersebut di level bundler, sehingga useI18n(), $t, pipe plurals, dan v-t tetap berfungsi sementara Intlayer menyajikan kontennya. Panduan migrasi membahas langkah-langkah melepaskan adapter setelahnya, dan tersedia juga panduan khusus Nuxt.

Sebelum Anda menentukan pilihan

Tabel fitur menunjukkan apa yang dapat dilakukan oleh library saat ini. Poin-poin berikut memberi gambaran seperti apa penggunaannya dalam jangka panjang.

Periksa aktivitas repositori.

Aktivitas commit, waktu respons isu, dan apakah rilis minor terakhir dilakukan pada tahun ini. Desain yang bagus tanpa maintainer adalah migrasi yang hanya menunggu waktu.

Jangan memilih hanya berdasarkan unduhan npm.

Library yang paling banyak dipasang adalah library yang dirilis pertama kali, bukan yang paling cocok untuk codebase Vue tahun 2026. Jumlah unduhan mengukur sejarah, bukan kecocokan.

Ketahui siapa yang mendanai maintainer, dan apa yang mereka jual.

vue-i18n didukung oleh Crowdin, seperti halnya next-intl dan svelte-i18n. i18next didukung oleh Locize. Tolgee, Paraglide (inlang), dan Intlayer masing-masing mengoperasikan platform mereka sendiri. Vendor yang pendapatannya berasal dari hosting terjemahan memiliki sedikit alasan untuk membuat terjemahan gratis di dalam toolchain Anda. Intlayer adalah satu-satunya di antara kelompok ini yang menyediakan terjemahan AI melalui CLI dengan API key Anda sendiri, serta CMS yang dapat Anda host sendiri (self-host).

Apakah library siap untuk AI agent?

Agent masih sering kesulitan dengan i18n: mereka melewatkan locale, mengarang keys, dan mencampuradukkan sintaks pesan. Apakah library menyediakan Agent Skills atau MCP server agar agent dapat membuat daftar, mengisi, dan menguji konten? Dan apakah pemuatan konten sudah dioptimalkan secara default, atau seseorang harus meninjau namespace dan lazy import setiap kuartal?

Type safety langsung tanpa konfigurasi tambahan (out of the box).

Bukan "dapat diberi types dengan konfigurasi tambahan", melainkan "key yang salah akan menggagalkan tsc pada instalasi baru". Periksa apa yang terjadi jika sebuah key tidak ada, dan jika sebuah locale kehilangan satu terjemahan.

Pendeteksian konten yang tidak terpakai.

Katalog terjemahan cenderung terus membengkak. Build Intlayer membersihkan field yang tidak terpakai dan mencatatnya (build.purge). Paraglide mencapainya melalui arsitektur, karena fungsi pesan yang tidak dipanggil akan di-tree-shake. Library lainnya menyerahkan proses pembersihan tersebut kepada Anda.

Developer experience.

Waktu setup hingga string terjemahan pertama muncul, dukungan LSP atau ekstensi VS Code yang menampilkan terjemahan saat hover dan melompat ke deklarasi, CLI untuk fill, test, dan push, serta cara bagi non-developer untuk mengedit konten (visual editor atau CMS) tanpa perlu membuat pull request.

Pertanyaan yang Sering Diajukan

Pelajari lebih lanjut

• Benchmark Vue i18n: ukuran bundle, kebocoran, dan waktu peralihan locale
• Vue i18n: cara kerja vue-i18n dan titik kelemahannya dan artikel Nuxt i18n
• vue-i18n vs Intlayer, fitur demi fitur dan benchmark vue-i18n vs Intlayer
• Apakah vue-i18n sudah ketinggalan zaman?
• Sejarah JavaScript i18n
• Compiler vs declarative i18n
• Per-component vs centralized i18n
• Menyiapkan i18n di aplikasi Vite + Vue dan di aplikasi Nuxt
• Panduan serupa untuk React, Svelte, dan Solid