vue-i18n'den Intlayer'a Geçiş

Neden vue-i18n'den Intlayer'a geçmelisiniz?

Geçiş Stratejileri

vue-i18n'den Intlayer'a geçiş yapmak için birbirini tamamlayan iki strateji vardır:

1. Uyumluluk Adaptörü (Mevcut uygulamalar için önerilir) — @intlayer/vue-i18n paketini kurun (Vue bileşenleri için). Bu paket arka planda tüm çeviri işlerini Intlayer'a devrederek vue-i18n ile tam olarak aynı API'yi sunar. Mevcut $t, useI18n() ve <i18n-t> kullanımınız dokunulmadan kalır; değişen tek şey içe aktarma yolu ve başlatma (initialization) ayarlarıdır.

2. Tam Geçiş — vue-i18n API'lerini kademeli olarak Intlayer'ın yerel (native) kancasıyla (useIntlayer) değiştirin ve içeriğinizi bileşenlerinizin yanındaki .content.ts dosyalarında tutun (colocate).

Bu kılavuz, öncelikle Strateji 1'i (doğrudan eklenebilir uyumluluk adaptörü) kapsar ve ardından isteğe bağlı tam geçişten bahseder.

İçindekiler

Hızlı Geçiş

Aşağıdaki adımlar, mevcut vue-i18n uygulamanızı hiçbir bileşen kodunu değiştirmeden Intlayer üzerinde çalıştırmak için gereken minimum işlemlerdir.

1. 1

   Bağımlılıkları Kurun

   Temel Intlayer paketlerini ve uyumluluk adaptörünü kurun:

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   npm install intlayer vue-intlayer @intlayer/vue-i18n @intlayer/sync-json-pluginnpx intlayer init

   vue-i18n'i güvenle yüklü bırakabilirsiniz; uyumluluk adaptörü onu TypeScript türleri için devDependency / peerDependency olarak kullanır.

2. 2

   Intlayer'ı Yapılandırın

   intlayer init komutu başlangıç olarak bir intlayer.config.ts dosyası oluşturur. Bunu mevcut yerel ayarlarınıza (locales) uyacak şekilde güncelleyin ve mesaj dosyalarınızı syncJSON eklentisine işaret edin:

   intlayer.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { Locales, type IntlayerConfig } from "intlayer";
   import { syncJSON } from "@intlayer/sync-json-plugin";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // Mevcut diğer dillerinizi (locales) buraya ekleyin
       ],
       defaultLocale: Locales.ENGLISH,
     },
     plugins: [
       syncJSON({
         // vue-i18n yer tutucu sentaksıyla eşleşir: {name}
         format: "icu",
         source: ({ locale }) => `./src/locales/${locale}.json`,
         location: "src/locales",
       }),
     ],
   };
   
   export default config;

   source, bir dili JSON dosya yolunuza eşler. location, Intlayer izleyicisine (watcher) değişiklikler için hangi klasörü izlemesi gerektiğini söyler. format: 'icu' seçeneği, vue-i18n yer tutucularının (placeholder) doğru bir şekilde çözümlenmesini garanti eder.

3. 3

   Intlayer Eklentilerini Paketleyiciye (Bundler) Ekleyin

   Mevcut bundler yapılandırmanızı uyumluluk eklentisiyle sarmalayın. Bu işlem, temel Intlayer eklentisini dâhil eder, içerik izlemeyi etkinleştirir ve en önemlisi modül takma adları (alias) enjekte eder. Böylece import … from 'vue-i18n' çağrıları derleme aşamasında şeffaf bir şekilde @intlayer/vue-i18n adresine yönlendirilir. Kaynak kodunda hiçbir değişiklik yapmanıza gerek yoktur.

   Vite İçin:

   vite.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { defineConfig } from "vite";
   import vue from "@vitejs/plugin-vue";
   import { vueI18nVitePlugin } from "@intlayer/vue-i18n/plugin";
   
   export default defineConfig({
     plugins: [vue(), vueI18nVitePlugin()],
   });

   vueI18nVitePlugin(), vite-intlayer altındaki normal intlayer() eklentisini sarmalar ve vue-i18n takma adlarını (alias) otomatik olarak ekler. Düzenli intlayer() vite-intlayer eklentisini kullanmak sözlükleri derler ancak alias eklemez; bu durumda içe aktarmaları manuel olarak @intlayer/vue-i18n olarak yeniden adlandırmanız gerekir (Adım 4'e bakın).

   Nuxt İçin:

   Eğer @nuxtjs/i18n (Nuxt entegrasyonu) kullanıyorsanız, nuxt-intlayer paketini yükleyip nuxt.config.ts dosyanıza ekleyin:

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   npm install nuxt-intlayer

   nuxt.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   export default defineNuxtConfig({
     modules: ["nuxt-intlayer"],
     // @nuxtjs/i18n modülü güvenle kaldırılabilir
   });

   createI18n() veya manuel provider çağrıları artık gerekli değildir. Intlayer tüm sözlükleri derleme (build) zamanında derler ve çalışma zamanında (runtime) yükleme adımını ortadan kaldırır. Alias yönlendirmesiyle sarmalanmış Provider başlatma (initialization) işlemini kendi halleder.

Hızlı geçiş bu kadar. Uygulamanız artık vue-i18n içe aktarmalarınız ve API'niz olduğu gibi kalarak Intlayer üzerinde çalışmaktadır.

Türetilmiş (Typed) çeviri anahtarları — otomatik olarak. Intlayer sözlüklerinizi derlediğinde, useI18n'e namespace seçeneğini iletirseniz kendi gerçek içeriğiniz için tür güvenli (typed) hale gelir. Anahtarlar IDE'nizde otomatik tamamlanır (autocomplete) ve geçersiz yollar, ekstra bir yapılandırma olmadan derleme (compile) anında TypeScript hatalarına neden olur.

ts

İçeriği kopyala

Kodu kopyala

Kodu panoya kopyala

// 'about' kayıtlı bir sözlüktürconst { t } = useI18n({ namespace: "about" });t("counter.label"); // ✓ otomatik tamamlandıt("does.not.exist"); // ✗ TypeScript Hatası

Tam Geçiş

Aşağıdaki adımlar isteğe bağlıdır ve kademeli olarak yapılabilir. Bunlar, görsel editör, CMS, türetilmiş (typed) içerik dosyaları, AI çeviri otomasyonu gibi Intlayer özelliklerinin tam kapsamlı kullanımını sağlar.

1. 4

   İçe Aktarmaları Açıkça Yeniden Adlandırın (İsteğe Bağlı)

   İsteğe bağlı

   Intlayer eklentisi takma adlama (aliasing) işlemlerini bundler düzeyinde çoktan halleder. Bağımlılığı kaynak dosyalarınızda açık tutmayı tercih ederseniz, içe aktarma yollarını manuel olarak yeniden adlandırabilirsiniz:

   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

   Öncesi	Sonrası
   import { useI18n } from 'vue-i18n'	import { useI18n } from '@intlayer/vue-i18n'
   import { createI18n } from 'vue-i18n'	import { createI18n } from '@intlayer/vue-i18n'

   Bunlar doğrudan değişimlerdir; fonksiyon çağırma şeklinizde, argümanlarda veya dönüş türlerinde hiçbir değişiklik gerekmez.

2. 5

   AI Çeviri Otomasyonunu Etkinleştirin

   İsteğe bağlı

   Intlayer yapılandırıldığında, eksik çevirileri otomatik olarak doldurmak için CLI'yı kullanabilirsiniz:

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   # Eksik çevirileri test et (CI'a ekleyin)npx intlayer test# Eksik çevirileri AI kullanarak doldurnpx intlayer fill

   AI yapılandırmanızı intlayer.config.ts dosyasına ekleyin:

   intlayer.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { Locales, type IntlayerConfig } from "intlayer";
   import { syncJSON } from "@intlayer/sync-json-plugin";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
       defaultLocale: Locales.ENGLISH,
     },
     plugins: [
       syncJSON({
         format: "icu",
         source: ({ locale }) => `./src/locales/${locale}.json`,
         location: "src/locales",
       }),
     ],
     ai: {
       apiKey: process.env.OPENAI_API_KEY,
       // provider: "openai",     // varsayılan
       // model: "gpt-4o-mini",   // varsayılan
     },
   };
   
   export default config;

   Mevcut tüm seçenekleri incelemek için Intlayer CLI Dokümantasyonuna göz atın.

Geçişten Sonra Silinebilecekler

Uyumluluk adaptörü kullanılmaya başlandığında, aşağıdaki standart vue-i18n tekrarlayan kodları (boilerplate) kaldırılabilir:

Bir adım öteye geçmeye hazır olduğunuzda, Intlayer kod tabanınızın herhangi bir yerindeki (varsayılan olarak ./src altındaki herhangi bir yerde) tüm .content.ts ve .content.json dosyalarını otomatik olarak keşfeder. Sadece MyComponent.vue'nun yanına bir my-component.content.ts dosyası bırakın, Intlayer onu ek bir yapılandırma olmadan derleme (build) sırasında yakalayacaktır. Ne içe aktarmaya, ne kayda, ne de merkezi bir indeks dosyasına ihtiyaç vardır. Bu sayede çeviriler sayfalar ve bileşenlerinizle en kolay şekilde bir arada tutulur (colocation).

TypeScript Kurulumu

Intlayer, çeviri anahtarlarınız için kapsamlı TypeScript IntelliSense'i (otomatik tamamlama) sağlamak için modül genişletme (module augmentation) özelliğini kullanır. tsconfig.json dosyanızın otomatik oluşturulan türleri içerdiğinden emin olun:

{  // ... Mevcut TypeScript yapılandırmalarınız  "include": [    // ... Mevcut TypeScript yapılandırmalarınız    ".intlayer/**/*.ts", // Otomatik oluşturulan türleri içeriğe dahil edin  ],}

Git Yapılandırması

Intlayer tarafından oluşturulan dizini .gitignore dosyanıza ekleyin:

# Intlayer tarafından oluşturulan dosyaları yoksay.intlayer

Daha Fazlasını Keşfedin

• Görsel Editör — Çevirileri doğrudan tarayıcınızda görsel olarak yönetin: Intlayer Görsel Editör
• CMS — İçeriği projenizden ayırın ve uzaktan yönetin: Intlayer CMS
• VS Code Eklentisi — Otomatik tamamlama ve anında hata tespiti (hover) edinin: Intlayer VS Code Eklentisi
• CLI Referansı — CLI komutlarının tam listesi: Intlayer CLI
• Vue İle Intlayer — Vue için tam kurulum rehberi: intlayerwithvite+vue.md
• Nuxt İle Intlayer — Nuxt için tam kurulum rehberi: intlayerwithnuxt.md