vue-i18n 2026'da Güncelliğini Yitirdi mi?

Vue topluluğunda vue-i18n kadar geniş kabul görmüş çok az kütüphane vardır. Vue 2 döneminden bu yana Kazupon tarafından sürdürülen bu araç, @nuxtjs/i18n paketine altyapı sağlar ve çok dilli Vue projelerinin varsayılan seçeneğidir.

Buna rağmen 2026 benchmark testlerimiz çarpıcı bir gerçeği ortaya çıkardı: vue-i18n, test edilen tüm frontend frameworkleri arasında en ağır yerelleştirme çalışma zamanı oldu.

Vite + Vue ile oluşturulan 31.5 KB boyutundaki yalın bir tabana vue-i18n eklendiğinde, sayfa başına düşen ortalama JavaScript miktarı 136.4 KB seviyesine fırlayarak dört katından fazla büyüdü.

Hafifliğiyle tanınan bir framework nasıl oldu da bu denli ağır bir i18n yapısına ulaştı? Ve klasik çalışma zamanı modeli günümüzde halen geçerli mi?

Öne Çıkanlar

Test edilen en ağır çalışma zamanı:

Metin eklenmeden önce 24.3 KB gzipped (83.2 KB minified) olan boyutuyla vue-i18n, intlayer'ın 2.7 KB'lık çalışma zamanından yaklaşık 9 kat daha ağırdır.

Sayfa yükünde %330 artış:

vue-i18n, 31.5 KB boyutundaki başlangıç sayfasını 136.4 KB'a çıkardı. Intlayer ise 59.3 KB üreterek %56 daha az sayfa yükü sağladı.

Tarayıcıda saklanan derleyici:

Paketleyicide özel alias tanımlanmadığı sürece vue-i18n, metinleri çalışma anında ayrıştırmak için istemciye tam bir mesaj derleyicisi gönderir.

Bakım sıklığı:

Geçtiğimiz yıl boyunca vue-i18n yaklaşık 259 commit aldı; bunlar hata çözümleri ve Vue sürümleriyle uyum üzerine yoğunlaştı.

Modern araç eksikliği:

Language Server (LSP), yapay zeka MCP sunucuları veya komut satırı çeviri süreçleri için resmi yerleşik destek bulunmuyor.

Bakım vs. Modern Araçlar

Tüm tablo içeriğini göster

Tüm tablo içeriğini göster

Tüm veri içeriğini net bir şekilde görmek için tabloyu modalde açın

Depo	Yıldızlar	Toplam commit	Yıllık commit	Son commit
intlify/vue-i18n
aymericzip/intlayer

Son on iki ay:

• intlify/vue-i18n: 259 commit (Vue 3 ve Nuxt için periyodik bakım).
• aymericzip/intlayer: 4.343 commit (derleyici optimizasyonları, LSP araçları ve yapay zeka entegrasyonları).

Köklü bir kütüphane istikrar sağlar. Fakat günümüz web mimarisi derleme anında AST dönüşümleri, ölü kod temizliği ve yapay zeka destekli yerelleştirme kullanır. Yalnızca çalışma zamanında çalışan bir sistemin bu yenilikleri benimsemesi zordur.

Vite + Vue Performans Sonuçları

Vite ve Vue 3 ile kurulan 10 sayfalık ve 10 dilli bir yapıda ölçülmüştür:

Gerçek tarayıcı ortamlarında gzip sıkıştırmasıyla test edilmiştir. Verilerin tamamı Vue benchmark dokümantasyonunda.

Temel Kütüphane Yükü

Çeviri metinleri eklenmeden önceki ilk ağırlık:

Sırf vue-i18n çalışma zamanı 24.3 KB gzipped yer kaplar, bu da neredeyse Vue'nun kendi çekirdeğine denktir. Intlayer ise yalnızca 2.7 KB ekler.

Sayfa Ağırlığı ve Veri Sızıntısı

Önemli Gözlemler

Ciddi oransal şişkinlik:

Vue tabanı son derece hafif (~31 KB) olduğundan, vue-i18n sayfa boyutunu dört katından fazlasına çıkarır.

Diğer sayfalara veri sızıntısı:

Varsayılan ayarlarda bir rotaya gönderilen çevirilerin %90'ı diğer sayfalara aittir. Intlayer bu gereksiz yükü tamamen ayıklayarak %0.0'a indirir.

Tekil bileşen boyutu:

Yerel kapsamda derlenen bileşenler, sözlüklerin tekrar etmesi sebebiyle vue-i18n ile ortalama 196 KB tutarken, Intlayer'da bu değer 6.5 KB olmuştur.

Sızıntı nasıl ölçeklenir:

Aşağıdaki grafik, sayfa başına yaklaşık 30 KB metin içeren, 1 ila 10 sayfadan oluşan ve 1 ila 10 dile çevrilmiş teorik bir uygulamanın içerik yükünü tahmin eder. İçeriği locale bazında dinamik yüklemek dil eksenini ortadan kaldırır, içeriği bileşen veya rota bazında sınırlamak sayfa eksenini ortadan kaldırır ve yalnızca ikisinin birleşimi yükü sabit tutar.

vue-i18n Neden Ağır?

Tarayıcıya Taşınan AST Derleyicisi

vue-i18n kendi mesaj formatı derleyicisini barındırır. Çoğul kuralları ve değişkenler çalışma zamanında Abstract Syntax Tree (AST) yapılarına dönüştürülür.

Bunun önüne geçmek için bundler konfigürasyonunda vue-i18n/dist/vue-i18n.runtime.esm-bundler.js adresine alias yönlendirmesi yapmak ve dosyaları @intlify/unplugin-vue-i18n ile önceden derlemek zorunludur. Çoğu proje bu ayarı gözden kaçırır.

Monolitik Özellik Yapısı

vue-i18n, sayı ve tarih motorları, bağlantılı mesajlar, Options API köprüleri ($t, v-t) ve reaktif vekiller içerir. <script setup> içinde sadece yalın metinler çevirmek isteseniz dahi tüm mekanizmayı yüklersiniz.

Dinamik Anahtarlar Tree-Shaking'i Önler

"home.hero.title" çalışma anında yorumlandığı için derleyiciler hangi metinlerin kullanıldığını anlayamaz. Kullanılmayan çeviriler pakette yer kaplamaya devam eder.

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

const { t } = useI18n();
</script>

<template>
  <h1>{{ t("home.hero.title") }}</h1>
</template>

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

const { title } = useIntlayer("hero");
</script>

<template>
  <h1>{{ title }}</h1>
</template>

Intlayer derleyicisi kullanılan özellikleri tam olarak belirler ve istemci paketini oluşturmadan önce gereksiz verileri ayıklar. Detaylar için paket optimizasyonu sayfasına bakın.

Geliştirici Deneyimi

Dağınık Kataloglar vs. Birlikte Konumlandırma

vue-i18n yapısında metinler ayrı bir locales/ dizinindedir. Intlayer ise içerik dosyalarını bileşenlerin hemen yanı başında tutar:

{
  "hero": {
    "title": "Ship in every language"
  }
}

{
  "hero": {
    "title": "Her dilde yayına alın"
  }
}

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

const { t } = useI18n();
</script>

<template>
  <h1>{{ t("hero.title") }}</h1>
</template>

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

export default {
  key: "hero",
  content: {
    title: t({
      en: "Ship in every language",
      tr: "Her dilde yayına alın",
    }),
  },
} satisfies Dictionary;

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

const { title } = useIntlayer("hero");
</script>

<template>
  <h1>{{ title }}</h1>
</template>

Hero.vue silindiğinde veya taşındığında, içerik dosyası da onunla birlikte işlem görür.

Otomatik Tamamlama vs. Kesin Eksiksizlik

DefineLocaleMessage temel şemaya göre editörde ipuçları sağlar. Ancak tüm dillerin eksiksiz olduğunu garanti etmez. tr.json içinden bir anahtarı silmeniz derleme esnasında hata oluşturmaz.

Intlayer ile sözlükler titizlikle kontrol edilir. strictMode ayarı açıldığında eksik bir çeviri doğrudan build hatasına dönüşür.

Geliştirici ve Yapay Zeka Araçları

Çeviri Süreçleri

vue-i18n yerleşik bir çeviri komutuna sahip değildir. Dosyalar genelde Crowdin veya Phrase gibi dış platformlara aktarılır.

Intlayer bu araçları standart olarak sunar:

Yerel Yapay Zeka ile Doldurma (intlayer fill):

Eksik anahtarları kendi OpenAI, Anthropic, Mistral veya Gemini anahtarlarınızla tamamlar.

Kendi Altyapınızda Barındırılabilir Görsel CMS:

Intlayer CMS ile teknik olmayan ekip üyelerinin doğrudan Git'e yansıyacak şekilde metin düzenlemesini sağlayın.

Açık Kaynak Lisansı:

Tüm araç seti Apache 2.0 lisansına sahiptir.

vue-i18n Hangi Koşullarda Halen Uygundur?

Mevcut vue-i18n Yapılandırmamı Nasıl Geliştirebilirim?

Intlayer, vue-i18n ve @nuxtjs/i18n kütüphanelerinin fonksiyon imzalarını (useI18n, $t, <i18n-t>) birebir koruyan doğrudan uyumluluk paketleri sunar. Hafif ve derleyici odaklı bir mimarinin avantajlarından faydalanmak için şablonlarınızı veya composable yapılarınızı sıfırdan yazmanız gerekmez.

Kurulum tek bir komutla tamamlanır:

npx intlayer init --interactive

Bu etkileşimli CLI aracı:

1. @intlayer/vue-i18n veya @intlayer/nuxt-i18n uyumluluk paketini yükler.
2. Vite veya Nuxt paketleyici takma adlarını (alias) yapılandırarak mevcut import'larınızın ve şablon etiketlerinizin doğrudan Intlayer'a yönlendirilmesini sağlar; böylece vue-i18n kütüphanesini package.json dosyasından kaldırabilirsiniz.
3. Editörde Dil Sunucusu (LSP) teşhislerini hemen aktif hale getirir, 24 KB'lık AST ayrıştırıcısını istemci paketinden tamamen çıkarır ve kapsamlı bir kod düzenlemesi gerekmeden yerel yapay zeka çeviri süreçlerini kullanıma sunar.

Ayrıntılı adımlar için hazırladığımız kılavuzları inceleyin:

• Kolay Uyumluluk: vue-i18n uyumluluk katmanı veya @nuxtjs/i18n ile mevcut şablonlarınızı koruyun.
• Rehberli Geçiş: JSON dosyalarınızı kılavuzlarımız yardımıyla dönüştürün: vue-i18n üzerinden veya @nuxtjs/i18n üzerinden.
• Hibrit Düzen: Arayüzde vue-i18n çalıştırmaya devam ederken, tip güvenliği ve yerel yapay zeka çevirisi için Intlayer'ı vue-i18n ile birleştirin.

Uygulamanızı ücretsiz i18n SEO Tarayıcısı ile analiz edin:

İlgili Makaleler

• Vue & Vite i18n Benchmark: Kapsamlı Değerlendirme
• vue-i18n vs Intlayer Karşılaştırması
• next-intl 2026'da Güncelliğini Yitirdi mi?
• Derleyici Odaklı vs Bildirime Dayalı i18n Mimarisi