@intlayer/docs 9.5.6 → 9.5.8

package/blog/tr/vue-i18n_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-07
-updatedAt: 2025-09-07
+updatedAt: 2026-09-22
 title: vue-i18n vs Intlayer
 description: vue-i18n'i Intlayer ile Vue/Nuxt uygulamalarında uluslararasılaştırma (i18n) için karşılaştırın
 keywords:
@@ -20,6 +20,8 @@ author: aymericzip
 
 # vue-i18n VS Intlayer | Vue Uluslararasılaştırma (i18n)
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 Bu rehber, **Vue 3** (ve **Nuxt**) için iki popüler i18n seçeneğini karşılaştırır: **vue-i18n** ve **Intlayer**.
 Modern Vue araçlarına (Vite, Composition API) odaklanıyoruz ve şunları değerlendiriyoruz:
 
@@ -40,6 +42,30 @@ Modern Vue araçlarına (Vite, Composition API) odaklanıyoruz ve şunları değ
 - **vue-i18n** - Vue için de-facto i18n kütüphanesi. Esnek mesaj formatlaması (ICU tarzı), yerel mesajlar için SFC `<i18n>` blokları ve büyük bir ekosistem. Güvenlik ve büyük ölçekli bakım çoğunlukla sizin sorumluluğunuzdur.
 - **Intlayer** - Vue/Vite/Nuxt için bileşen merkezli içerik modeli, **katı TS yazımı**, **derleme zamanı kontrolleri**, **ağaç sallama**, **yönlendirici ve SEO yardımcıları**, isteğe bağlı **Görsel Düzenleyici/CMS** ve **AI destekli çeviriler**.
 
+## Derleme zamanında maliyeti nedir
+
+Özellik tablolarından önce, ölçülen kısım. [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) aynı Vite + Vue 3 uygulamasını (10 sayfa, 10 dil) her kütüphaneyle derler ve tarayıcının indirdiklerini kaydeder:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
+| Setup                | Lib size (gz) | Page JS avg (gz) | Page leak | Component avg (gz) |
+| -------------------- | ------------: | ---------------: | --------: | -----------------: |
+| **base** (no i18n)   |        0.0 KB |          41.3 KB |         - |             1.1 KB |
+| `vue-i18n`           |       24.3 KB |         134.9 KB |     90.0% |           196.0 KB |
+| `@intlayer/vue-i18n` |        7.9 KB |          47.0 KB |      0.0% |             8.4 KB |
+| **`vue-intlayer`**   |    **3.9 KB** |      **57.1 KB** |  **0.0%** |         **7.7 KB** |
+
+`vue-i18n` çalışma zamanı tek başına Intlayer'ın **6 katı** büyüklüğündedir, her sayfa **%90 oranında yabancı sayfa dizgisi** taşır ve tek başına derlenen bir bileşen, `useI18n()` onu genel mesaj ağacına bağladığı için **196 KB** yük getirir. Reaktivite ve sayfa yükleme sürelerini içeren tam rapor [vue-i18n vs Intlayer karşılaştırmasında](https://intlayer.org/tr/blog/vue-i18n-vs-intlayer-benchmark) yer almaktadır.
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Tam tablo [Vue kıyaslama raporunda](https://intlayer.org/tr/doc/benchmark/vue).
+
 ## Yan Yana Özellik Karşılaştırması (Vue odaklı)
 
 | Özellik                                                 | **Intlayer**                                                                                   | **vue-i18n**                                                                             |
@@ -65,59 +91,74 @@ Modern Vue araçlarına (Vite, Composition API) odaklanıyoruz ve şunları değ
 
 ## Derinlemesine karşılaştırma
 
-### 1) Mimari ve ölçeklenebilirlik
+<AccordionGroup>
+<Accordion header="1) Mimari ve ölçeklenebilirlik">
 
-- **vue-i18n**: Ortak kurulumlar yerel başına **merkezi kataloglar** kullanır (isteğe bağlı olarak dosyalara/ad alanlarına bölünür). SFC `<i18n>` blokları yerel mesajlara izin verir ancak ekipler projeler büyüdükçe paylaşılan kataloglara geri döner.
+- **vue-i18n**: Ortak kurulumlar yerel başına **merkezi kataloglar** kullanır (isteğe bağlı olarak dosyalara/ad alanlarına bölünür). SFC `<i18n>` blokları yerel mesajlara izin verir ancak ekipler projeler büyüdükçe paylaşılan kataloglara geri döner. Bkz. [bileşen başına ve merkezi i18n karşılaştırması](https://intlayer.org/tr/blog/per-component-vs-centralized-i18n).
 - **Intlayer**: Hizmet ettikleri bileşenle birlikte **bileşen başına sözlükleri** teşvik eder. Bu, ekip arası çatışmaları azaltır, içeriği keşfedilebilir tutar ve doğal olarak kayma/kullanılmayan anahtarları sınırlandırır.
 
 **Neden önemli:** Büyük Vue uygulamalarında veya tasarım sistemlerinde, **modüler içerik** monolitik kataloglardan daha iyi ölçeklenir.
 
-### 2) TypeScript ve güvenlik
+</Accordion>
+<Accordion header="2) TypeScript ve güvenlik">
 
 - **vue-i18n**: İyi TS desteği; **katı anahtar yazımı** genellikle özel şemalar/genel türler ve dikkatli kurallar gerektirir.
 - **Intlayer**: İçeriğinizden **katı türler oluşturur**, **IDE otomatik tamamlama** ve yazım/eksik anahtarlar için **derleme zamanı hataları** sağlar.
 
 **Neden önemli:** Güçlü yazım, sorunları **çalışma zamanından önce** yakalar.
 
-### 3) Eksik çeviri işleme
+</Accordion>
+<Accordion header="3) Eksik çeviri yönetimi">
 
-- **vue-i18n**: **Çalışma zamanı** uyarılar/geri dönüşler (örneğin, yerel veya anahtara geri dön).
-- **Intlayer**: Yerel ve anahtarlar genelinde **derleme zamanı** algılama ile uyarılar/hatalar.
+- **vue-i18n**: **Çalışma zamanı** uyarılar/geri dönüşler (örneğin, yerel veya anahtara geri dön). Bkz. [eksik çevirileri tespit etme](https://intlayer.org/tr/blog/detecting-missing-translations).
+- **Intlayer**: Yerel ve anahtarlar genelinde **derleme zamanı** algılama ile uyarılar/hatalar., artı CI'da `npx intlayer test`.
 
 **Neden önemli:** Derleme zamanı uygulaması, üretim UI'sini temiz ve tutarlı tutar.
 
-### 4) Yönlendirme ve URL stratejisi (Vue Router/Nuxt)
+</Accordion>
+<Accordion header="4) Yönlendirme ve URL stratejisi (Vue Router/Nuxt)">
 
-- **İkisi de** yerelleştirilmiş yollarla çalışabilir.
+- **İkisi de** yerelleştirilmiş yollarla çalışabilir. Bkz. [hreflang kılavuzu](https://intlayer.org/tr/blog/hreflang-guide-multilingual-seo).
 - **Intlayer**, **yerelleştirilmiş yollar oluşturmak**, **yerel önekleri yönetmek** ve SEO için **`<link rel="alternate" hreflang>`** yaymak için yardımcılar sağlar. Nuxt ile, çerçevenin yönlendirmesini tamamlar.
 
 **Neden önemli:** Daha az özel yapıştırıcı katman ve yerel genelinde **daha temiz SEO**.
 
-### 5) Performans ve yükleme davranışı
+</Accordion>
+<Accordion header="5) Performans ve yükleme davranışı">
 
-- **vue-i18n**: Zaman uyumsuz yerel mesajları destekler; aşırı paketlemeyi önlemek sizin sorumluluğunuzdur (katalogları dikkatlice bölün).
+- **vue-i18n**: Zaman uyumsuz yerel mesajları destekler; aşırı paketlemeyi önlemek sizin sorumluluğunuzdur (katalogları dikkatlice bölün). Yukarıdaki kıyaslama bunu sayılarla ortaya koyuyor: sayfa başına 134.9 KB'a karşı 57.1 KB.
 - **Intlayer**: **Derleme zamanında ağaç sallar** ve **sözlük/yere göre tembel yükler**. Kullanılmayan içerik gönderilmez.
 
 **Neden önemli:** Çok yerel Vue uygulamaları için daha küçük paketler ve daha hızlı başlatma.
 
-### 6) Geliştirici deneyimi ve araçlar
+</Accordion>
+<Accordion header="6) Geliştirici deneyimi ve araçlar">
 
 - **vue-i18n**: Olgun dokümantasyon ve topluluk; genellikle düzenleme iş akışları için **harici yerelleştirme platformlarına** güveneceksiniz.
-- **Intlayer**: **Ücretsiz Görsel Düzenleyici**, isteğe bağlı **CMS** (Git dostu veya dışa aktarılmış), **VSCode uzantısı**, **CLI/CI** yardımcıları ve kendi sağlayıcı anahtarlarınızı kullanarak **AI destekli çeviriler** gönderir.
+- **Intlayer**: **Ücretsiz Görsel Düzenleyici**, isteğe bağlı **CMS** (Git dostu veya dışa aktarılmış), **VSCode uzantısı**, **CLI/CI** yardımcıları ve kendi sağlayıcı anahtarlarınızı kullanarak **AI destekli çeviriler** gönderir., bir **MCP sunucusu**
 
 **Neden önemli:** Daha düşük operasyon maliyeti ve geliştiriciler ile içerik yazarları arasındaki döngüyü kısaltır.
 
-### 7) SEO, SSR ve SSG
+</Accordion>
+<Accordion header="7) SEO, SSR ve SSG">
 
-- **İkisi de** Vue SSR ve Nuxt ile çalışır.
+- **İkisi de** Vue SSR ve Nuxt ile çalışır. Bkz. [uluslararasılaştırma ve SEO](https://intlayer.org/tr/blog/SEO-and-i18n).
 - **Intlayer**: Vue/Nuxt yapılarıyla iyi uyumlu, çerçeve agnostik **SEO yardımcıları** (site haritaları/meta veri/`hreflang`) ekler.
 
 **Neden önemli:** Özel kablolama olmadan uluslararası SEO.
 
+</Accordion>
+</AccordionGroup>
+
 ## Neden Intlayer? (Sorun ve yaklaşım)
 
+![Centralized catalogs versus per-component dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/assets/project_stucture_18n_vs_intlayer.png?raw=true)
+
 Çoğu i18n yığını (**vue-i18n** dahil) **merkezi kataloglardan** başlar:
 
+<Tabs defaultTab="per-locale" group="catalog">
+<Tab label="Dil başına bir dosya" value="per-locale">
+
 ```bash
 .
 ├── locales
@@ -129,7 +170,8 @@ Modern Vue araçlarına (Vite, Composition API) odaklanıyoruz ve şunları değ
         └── MyComponent.vue
 ```
 
-Veya yerel klasörlerle:
+</Tab>
+<Tab label="Dil başına bir klasör" value="per-folder">
 
 ```bash
 .
@@ -148,6 +190,34 @@ Veya yerel klasörlerle:
         └── MyComponent.vue
 ```
 
+</Tab>
+</Tabs>
+
+Bu klasör her dilde özellik başına bir ad alanıyla büyümeye devam eder:
+
+```txt
+locales
+├── EN
+│   ├── blog.json
+│   ├── about.json
+│   ├── auth.json
+│   ├── blog.json
+│   ├── cart.json
+│   ├── categories.json
+│   ├── contact.json
+│   ├── dashboard.json
+│   ├── errors.json
+│   ├── faq.json
+│   ├── footer.json
+│   ├── form.json
+│   ├── home.json
+│   ├── language.json
+│   ├── navbar.json
+│   ├── ... 65 files
+│   └── validation.json
+└── ES
+```
+
 Bu, uygulamalar büyüdükçe geliştirmeyi yavaşlatır:
 
 1. **Yeni bir bileşen için** uzak katalogları oluştur/düzenle, ad alanlarını bağla ve çevir (genellikle AI araçlarından manuel kopyala/yapıştır ile).
@@ -163,7 +233,33 @@ Bu, uygulamalar büyüdükçe geliştirmeyi yavaşlatır:
         └── MyComponent.vue
 ```
 
-**İçerik beyanı** (bileşen başına):
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="vue-i18n" value="vue-i18n">
+
+```json fileName="./locales/en.json"
+{
+  "componentExample": {
+    "greeting": "Hello World"
+  }
+}
+```
+
+```vue fileName="./components/MyComponent.vue"
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <span>{{ t("componentExample.greeting") }}</span>
+</template>
+```
+
+Her yerel ayar dosyasının elle düzenlenmesi gerekir ve anahtar düz bir metindir: bir yazım hatası üretimde `componentExample.greting` olarak görüntülenir.
+
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="./components/MyComponent/myComponent.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -173,8 +269,8 @@ const componentExampleContent = {
   content: {
     greeting: t({
       en: "Hello World",
-      es: "Hola Mundo",
       fr: "Bonjour le monde",
+      es: "Hola Mundo",
     }),
   },
 } satisfies Dictionary;
@@ -182,11 +278,10 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-**Vue'da kullanım** (Composition API):
-
 ```vue fileName="./components/MyComponent/MyComponent.vue"
 <script setup lang="ts">
-import { useIntlayer } from "vue-intlayer"; // Vue entegrasyonu
+import { useIntlayer } from "vue-intlayer"; // Vue integration
+
 const { greeting } = useIntlayer("component-example");
 </script>
 
@@ -195,6 +290,11 @@ const { greeting } = useIntlayer("component-example");
 </template>
 ```
 
+Tüm diller bileşenin yanında tek bir tiplenmiş dosyada yer alır.
+
+</Tab>
+</Tabs>
+
 Bu yaklaşım:
 
 - **Geliştirmeyi hızlandırır** (bir kez beyan et; IDE/AI otomatik tamamlar).
@@ -222,20 +322,71 @@ Bu yaklaşım:
 
 ## Hangisini ne zaman seçmeli?
 
-- **vue-i18n**'i seçin eğer **standart Vue yaklaşımını** istiyorsanız, katalogları/ad alanlarını kendiniz yönetmekle rahatınız ve uygulamanız **küçük ila orta boy**.
-- **Intlayer**'ı seçin eğer **bileşen kapsamlı içerik**, **katı TypeScript**, **derleme zamanı garantileri**, **ağaç sallama** ve **pil dahil yönlendirme/SEO/düzenleyici araçlarını** takdir ediyorsanız - özellikle **büyük, modüler Vue/Nuxt kod tabanları**, tasarım sistemleri vb. için.
+<AccordionGroup>
+<Accordion header="vue-i18n'i seçin">
+
+**Standart Vue yaklaşımını** istiyorsanız, katalogları ve ad alanlarını kendiniz yönetmekten memnunsanız ve uygulamanız **küçük veya orta ölçekliyse** (ya da zaten Nuxt i18n kullanıyorsanız). SFC `<i18n>` blokları ve çalışma zamanı `setLocaleMessage()`, Intlayer'ın bilinçli olarak taklit etmediği özelliklerdir.
+
+</Accordion>
+<Accordion header="Intlayer'ı seçin">
+
+**Bileşen kapsamlı içeriğe**, **katı TypeScript desteğine**, **derleme zamanı garantilerine**, **tree-shaking'e** ve yönlendirme, SEO ve düzenleyici araçlarına değer veriyorsanız, özellikle **büyük, modüler Vue/Nuxt kod tabanları** ve tasarım sistemleri için. [Vue ile Intlayer](https://intlayer.org/tr/doc/environment/vite-and-vue) veya [Nuxt ile](https://intlayer.org/tr/doc/environment/nuxt-and-vue) başlayın.
+
+</Accordion>
+<Accordion header="@intlayer/vue-i18n'i seçin">
+
+Şu anda `vue-i18n` kullanıyorsanız ve `.vue` dosyalarını düzenlemeden paket boyutu kazanımı istiyorsanız. [Uyumluluk adaptörü](https://intlayer.org/tr/doc/compatibility/vue-i18n), `createI18n`, `useI18n`, `t()`, `d()`, `n()`, `$t` ve `v-t` çağrılarını korur ve derlenmiş sözlüklerden sunar. [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/tr/blog/vue-i18n-vs-intlayer-vue-i18n) sayfasında yan yana ölçülmüştür.
+
+</Accordion>
+</AccordionGroup>
 
 ## vue-i18n ile birlikte çalışabilirlik
 
 `intlayer`, `vue-i18n` ad alanlarınızı yönetmenize de yardımcı olabilir.
 
-`intlayer` kullanarak, içeriğinizi favori i18n kütüphanenizin formatında beyan edebilirsiniz ve intlayer ad alanlarınızı istediğiniz konumda oluşturacaktır (örnek: `/messages/{{locale}}/{{namespace}}.json`).
+`intlayer` kullanarak, içeriğinizi favori i18n kütüphanenizin formatında beyan edebilirsiniz ve intlayer ad alanlarınızı istediğiniz konumda oluşturacaktır (örnek: `/messages/{{locale}}/{{namespace}}.json`). Bkz. [vue-i18n uyumluluk belgeleri](https://intlayer.org/tr/doc/compatibility/vue-i18n) ve [Nuxt i18n adaptörü](https://intlayer.org/tr/doc/compatibility/nuxtjs-i18n).
+
+## SSS
+
+<FAQ>
+
+<Question title="Intlayer, vue-i18n için bir alternatif mi yoksa üzerine kurulu bir katman mı?">
+
+Nasıl benimsediğinize bağlı olarak her ikisi de. `vue-intlayer`, kendi `useIntlayer()` fonksiyonuna sahip yerel bir çalışma zamanıdır. `@intlayer/vue-i18n`, `vue-i18n` API'sini koruyan ve bağlı olduğu yapıyı değiştiren bir uyumluluk adaptörüdür, böylece bileşenlere dokunmadan geçiş yapabilir ve ardından dosya dosya ilerleyebilirsiniz.
+
+</Question>
+
+<Question title="SFC <i18n> bloklarıma ne olur?">
+
+Adaptör bunları okumaz. Bu mesajları yerel ayar JSON dosyanıza veya üretilen tiplerle aynı konsepte sahip olan bileşenin yanındaki `.content.ts` dosyasına taşıyın. Bu, `vue-i18n`'in aktarılmayan tek özelliğidir.
+
+</Question>
+
+<Question title="Intlayer Nuxt ile çalışır mı?">
+
+Evet. [Nuxt ile Intlayer](https://intlayer.org/tr/doc/environment/nuxt-and-vue) çok dilli yönlendirme, dil algılama ara yazılımı ve site haritası oluşturmayı kapsar. `@nuxtjs/i18n` kullanıyorsanız, [Nuxt i18n uyumluluk adaptörü](https://intlayer.org/tr/doc/compatibility/nuxtjs-i18n) geçiş yoludur.
+
+</Question>
+
+<Question title="locales/{locale}.json dosyalarımı referans kaynağı olarak tutabilir miyim?">
+
+Evet. [JSON senkronizasyon eklentisi](https://intlayer.org/tr/doc/compatibility/vue-i18n) bunları `vue-i18n` sözdizimiyle (`{name}`, `{0}`, `"car | cars"` boru çoğulları) okur ve CLI veya CMS güncellediğinde çevirileri geri yazar.
+
+</Question>
+
+<Question title="ICU, Vue üzerinde Intlayer ile çalışır mı?">
+
+Yerel ICU desteği geliştirme aşamasındadır. `@intlayer/vue-i18n` adaptörü, boru çoğulları ve adlandırılmış/liste enterpolasyonu dahil olmak üzere `vue-i18n`'in kendi mesaj sözdizimini çözümler. Intlayer'ın çoğullaştırma modeli için [numaralandırma içeriği](https://intlayer.org/tr/doc/concept/content/enumeration) bölümüne bakın.
+
+</Question>
+
+</FAQ>
 
 ## GitHub YILDIZLARI
 
 GitHub yıldızları, bir projenin popülaritesinin, topluluk güveninin ve uzun vadeli öneminin güçlü bir göstergesidir. Teknik kalitenin doğrudan bir ölçüsü olmasa da, kaç geliştiricinin projeyi yararlı bulduğunu, ilerlemesini takip ettiğini ve muhtemelen benimsediğini yansıtır. Bir projenin değerini tahmin etmek için yıldızlar, alternatifler arasındaki çekişmeyi karşılaştırmaya ve ekosistem büyümesine ilişkin içgörüler sağlamaya yardımcı olur.
 
-[![Yıldız Geçmişi Grafiği](https://api.star-history.com/svg?repos=intlify/vue-i18n&repos=aymericzip/intlayer&type=Date)](https://star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
+[![Yıldız Geçmişi Grafiği](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
 
 ## Sonuç
 
@@ -244,4 +395,15 @@ Hem **vue-i18n** hem de **Intlayer** Vue uygulamalarını iyi yerelleştirir. Fa
 - **Intlayer** ile, **modüler içerik**, **katı TS**, **derleme zamanı güvenliği**, **ağaç sallanan paketler** ve **yönlendirici/SEO/düzenleyici araçları** **kutudan çıkar**.
 - Ekibiniz çok yerel, bileşen odaklı bir Vue/Nuxt uygulamasında **bakım ve hızı** takdir ediyorsa, Intlayer bugün **en kapsamlı** deneyimi sunar.
 
-Daha fazla detay için ['Neden Intlayer?' dokümantasyonuna](https://intlayer.org/doc/why) bakın.
+## Daha fazla okuma
+
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/tr/blog/vue-i18n-vs-intlayer-benchmark), the measured run behind the table above
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/tr/blog/vue-i18n-vs-intlayer-vue-i18n), the adapter on the same app
+- [Is vue-i18n outdated?](https://intlayer.org/tr/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/tr/blog/how-to-pick-vue-i18n-library)
+- [Using Intlayer with vue-i18n](https://intlayer.org/tr/blog/intlayer-with-vue-i18n)
+- [Vue benchmark report](https://intlayer.org/tr/doc/benchmark/vue)
+- [Migration guide: vue-i18n to Intlayer](https://intlayer.org/tr/doc/migration/vue-i18n)
+- [Bundle optimization](https://intlayer.org/tr/doc/concept/bundle-optimization) and [the Intlayer compiler](https://intlayer.org/tr/doc/compiler)
+
+Refer to ['Why Intlayer?' doc](https://intlayer.org/tr/doc/why) for more details.