Doğru Vue i18n kütüphanesi nasıl seçilir

"Vue i18n" hem genel bir terim hem de neredeyse herkesin yüklediği kütüphanenin adıdır. Bu durum aynı anda hem kullanışlı hem de yanıltıcıdır: vue-i18n iyi bir varsayılandır, ancak tek seçenek değildir ve seçimi yönlendirmesi gereken sorular (SSR var mı yok mu, kaç sayfa var, çevirileri kim yazıyor) npm install öncesinde nadiren sorulur.

Bu rehber önce bu soruları sorar, ardından sade Vite + Vue ve Nuxt için yanıtları uygun kütüphanelerle eşleştirir.

İçindekiler

Kütüphaneleri karşılaştırmadan önce yanıtlanması gereken altı soru

1. Vite SPA mı yoksa Nuxt mı? Bir SPA'da katalog maliyeti bir JS bundle problemidir. Nuxt'ta ise aynı zamanda bir HTML payload problemidir, çünkü mesajlar SSR durumuna serialize edilir ve hydrate edilir. Çoğu "vue-i18n yavaş" bildirimi bu nedenle Nuxt uygulamalarından gelir.
2. Çevirileri kim yazıyor? Geliştiriciler, bir TMS, ICU string'leri teslim eden bir ajans veya bir AI pipeline'ı. vue-i18n ICU değil, kendi pipe ile ayrılmış çoğul sözdizimini kullanır. String'ler dışarıdan geliyorsa bu önemlidir.
3. Kaç dil ve sayfa var? İki dil ve beş sayfa her şeyi tek seferde gönderebilir. On dil ve kırk route bunu yapamaz ve yükleme stratejisi ana maliyet haline gelir.
4. Key'lerde type'lara ihtiyacınız var mı? createI18n'e bir mesaj schema generic'i iletmediğiniz sürece t("cart.totl") vue-i18n içinde derlenir ve bu schema, lazy load edilen kataloglarla çakışır.
5. İçerik ne barındırıyor? Yalnızca UI etiketleri mi, yoksa markdown, cümle içi link'ler ve dil bazlı bloklar mı? Zengin içerik, t() fonksiyonunun string döndürmesinin hantallaştığı yerdir.
6. CSP bir kısıtlama mı? Varsayılan vue-i18n build'i mesajları tarayıcıda new Function ile derler. Yalnızca runtime build'leri build time sırasında ön derleme yapmak için @intlify/unplugin-vue-i18n gerektirir.

Yanıtları not edin. Aşağıdaki her şey bunlara atıfta bulunacaktır.

Tek resimde genel manzara

Vue ekosisteminde React'e kıyasla daha az i18n kütüphanesi vardır ve bunlar farklı mimari dalgalardan gelir.

JavaScript i18n tarihi her dalgayı ayrıntılı olarak ele almaktadır.

En önemli karar: içerik nerede yaşar ve ne zaman yüklenir

İki yapısal tercih, kurulumlar arasındaki bundle farkının çoğunu açıklar:

• Merkezi veya scoped içerik. Uygulama için tek bir locales/en.json veya bileşen başına bir tanımlama.
• Statik veya dinamik import. Başlangıçta her şey veya aktif dil (ve ideal olarak aktif route) talep üzerine getirilir.

Grafik, sayfa başına yaklaşık 30 KB metin içeren, 1 ila 10 dile çevrilmiş, 1 ila 10 sayfalık teorik bir uygulama için payload'u tahmin etmektedir.

vue-i18n dinamik ekseni destekler: bir import() sonrasında setLocaleMessage, kimsenin okumadığı dokuz dili göndermeyi bıraktığınız anlamına gelir. Size sağlamadığı şey ise sayfa eksenidir. Bir dil kataloğu tek bir nesnedir ve onu yüklemek her sayfanın metnini yükler. Bir SPA'da bunu kimse fark etmez. Nuxt'ta, @nuxtjs/i18n ve ondan fazla sayfa ile her route diğer tüm route'ların string'lerini iki kez taşır: JS chunk'ında ve SSR payload'unda.

Vue benchmark bunu "diğer route'lardan sızıntı" ve "diğer dillerden sızıntı" olarak ölçer. 3. soruya cevabınız "çok sayıda sayfa" ise, bu bölüm her türlü API tercihinden daha ağır basar. Bileşen bazlı ve merkezi i18n yazısı, aynı dengenin bakım tarafını ele alır.

Adaylar

Kütüphane boyutları Vue benchmark çalışmasından alınmıştır: 10 sayfalık, 10 dilli bir uygulamada, bundling, tree-shaking ve minification sonrasında boş bir bileşendeki plugin artı composable. İçerik ayrı olarak ölçülür.

Rakamlar benchmark sürümlerindeki anlık bir görüntüdür. Yalnızca boyuta göre karar vermeden önce kendi uygulamanızda çalıştırın.

Paraglide'ın sıfıra yakın kütüphane boyutu yapısı gereğidir: runtime repository'nizin içine üretilir, bu da her push öncesi yeniden üretim adımı ve üretilen dosyalarda merge conflict anlamına gelir. Intlayer vite-intlayer'a (veya Nuxt modülüne) ihtiyaç duyar, bu nedenle build adımı olmadan çalışamaz.

Yanıtlarınızı bir kütüphaneyle eşleştirin

Her kütüphanenin yetersiz kaldığı yönler

• vue-i18n: grubun en ağırı, kendine ait çoğul formatı, type'lar opt-in ve lazy loading ile kırılgandır, route başına scoping yoktur, kullanılmayan key'ler sessizce birikir. Vue 3 uygulamasında legacy: true bırakmak Vue 2 uyumluluk katmanını korur ve useI18n() type desteğini kaybettirir.
• @nuxtjs/i18n: yukarıdakilerin tümünü devralır ve bir düzine route aşıldığında SSR payload her sayfanın string'lerini taşır.
• fluent-vue: güzel mesaj sözdizimi, key type'ları yok ve Vite eklentisi tüm dillerdeki tüm içeriği her sayfaya yükler. Benchmark'taki en ağır kütüphanedir.
• Paraglide: repo'ya commit edilen üretilmiş dosyalar, her push öncesi yeniden üretim ve dil reaktif bir store yerine her mesaj çağrısında cookie veya storage'dan okunur, bu da dil değişiminde ek maliyet yaratır.
• Intlayer: zorunlu build eklentisi, daha küçük ekosistem, kısmi ICU desteği ve tasarım gereği codebase geneline yayılmış içerik, bu yüzden bir çevirmen için tek bir JSON export etmek araç gerektirir.

Her seçeneğin kodda görünümü

Aynı bileşen, bir başlık ve çoğul içeren bir sepet özeti, her adayla yazılmıştır. İlginç olan kısım template değil, içeriğin nerede yaşadığı ve vue-tsc'nin bu konuda ne bildiğidir.

{
  "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({
      tr: "Sepetiniz",
      en: "Your cart",
      fr: "Votre panier",
      es: "Tu carrito",
    }),
    items: t({
      tr: plural({ one: "{{count}} ürün", other: "{{count}} ürün" }),
      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>

Halihazırda vue-i18n kullanıyor musunuz? @intlayer/vue-i18n compat adaptörü, paketi bundler düzeyinde alias'lar, böylece Intlayer içeriği sunarken useI18n(), $t, pipe çoğulları ve v-t çalışmaya devam eder. Geçiş rehberi sonrasında adaptörden çıkışı kapsar ve bir de Nuxt'a özel rehber bulunmaktadır.

Karar vermeden önce

Bir özellik tablosu size bir kütüphanenin bugün ne yaptığını söyler. Bu maddeler ise onunla yaşamanın nasıl bir şey olacağını anlatır.

Repository aktivitesini kontrol edin.

Commit'ler, issue yanıt süresi ve son minor sürümün bu yıl çıkıp çıkmadığı. Bakımı yapılmayan sağlam bir tasarım, gerçekleşmeyi bekleyen bir migrasyondur.

npm indirmelerine göre seçim yapmayın.

En çok yüklenen kütüphane ilk çıkan kütüphanedir, 2026 Vue codebase'ine en uygun olan değil. İndirmeler uyumu değil, geçmişi ölçer.

Bakımını üstlenen kişiye kimin ödeme yaptığını ve ne sattıklarını sorun.

vue-i18n, next-intl ve svelte-i18n gibi Crowdin tarafından desteklenmektedir. i18next, Locize tarafından desteklenmektedir. Tolgee, Paraglide (inlang) ve Intlayer'ın her biri kendi platformunu işletmektedir. Geliri barındırılan çeviri olan bir sağlayıcının, araç zinciriniz içinde çeviriyi ücretsiz hale getirmek için pek bir nedeni yoktur. Intlayer, CLI aracılığıyla kendi API anahtarınızla yapay zeka çevirisi sunan ve self-host edebileceğiniz bir CMS sağlayan tek seçenektir.

Yapay zeka ajanlarına hazır mı?

Ajanlar i18n ile hâlâ zorlanıyor: dilleri unutuyorlar, key uyduruyorlar ve mesaj sözdizimlerini karıştırıyorlar. Kütüphane, ajanın içeriği listeleyebilmesi, doldurabilmesi ve test edebilmesi için Agent Skills veya bir MCP server sunuyor mu? Ve içerik yükleme varsayılan olarak optimize edilmiş mi, yoksa birinin her çeyrekte namespace'leri ve lazy import'ları gözden geçirmesi mi gerekiyor?

Kutudan çıktığı gibi Type safety.

"Ekstra yapılandırmayla type eklenebilir" değil, "temiz bir kurulumda yanlış bir key tsc'yi patlatır". Var olmayan bir key ile ve bir çevirisi eksik olan bir dilde ne olduğunu kontrol edin.

Kullanılmayan içeriğin tespiti.

Kataloglar yalnızca büyür. Intlayer'ın build işlemi kullanılmayan alanları temizler ve bunları loglar (build.purge). Paraglide buraya mimarisiyle ulaşır, çünkü çağrılmayan bir mesaj fonksiyonu tree-shake edilir. Diğer her şey temizliği size bırakır.

Developer experience (Geliştirici deneyimi).

İlk çevrilmiş string'e kadar kurulum süresi, hover sırasında çeviriyi gösteren ve tanımlamaya atlayan bir LSP veya VS Code eklentisi, doldurma, test etme ve push işlemleri için bir CLI ve geliştirici olmayanların bir pull request olmadan içeriği düzenlemesinin bir yolu (görsel editör veya CMS).

Sıkça Sorulan Sorular

Daha fazlası

• Vue i18n benchmark: bundle boyutu, sızıntı ve dil değiştirme süreleri
• Vue i18n: vue-i18n nasıl çalışır ve nerede zorlar ve Nuxt i18n yazısı
• vue-i18n ve Intlayer karşılaştırması, özellik özellik ve vue-i18n ve Intlayer benchmark karşılaştırması
• vue-i18n artık eskidi mi?
• JavaScript i18n tarihi
• Compiler ve deklaratif i18n karşılaştırması
• Bileşen bazlı ve merkezi i18n
• Vite + Vue uygulamasında i18n kurulumu ve Nuxt uygulamasında i18n kurulumu
• React, Svelte ve Solid için aynı rehber