@nuxtjs/i18n'den Intlayer'a Geçiş

Neden @nuxtjs/i18n'den Intlayer'a geçmelisiniz?

Geçiş Stratejileri

@nuxtjs/i18n arka planda vue-i18n ile çalıştığı için Intlayer'a geçiş yaparken kullanabileceğiniz iki tamamlayıcı strateji bulunur:

1. Uyumluluk Adaptörü (Mevcut uygulamalar için önerilir) — @intlayer/vue-i18n ve nuxt-intlayer paketlerini kurun. Bu paketler arka planda tüm çeviri işlerini Intlayer'a devrederek vue-i18n ile tam olarak aynı API'yi sunar. Mevcut $t, useI18n() ve Nuxt router kullanımınız dokunulmadan kalır; değişen tek şey başlatma işlemidir.

2. Tam Geçiş — @nuxtjs/i18n API'lerini kademeli olarak Intlayer'ın yerel (native) kancaları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 Nuxt 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 nuxt-intlayer @intlayer/vue-i18n @intlayer/sync-json-pluginnpx intlayer init

   Geçiş sürecinde @nuxtjs/i18n kurulumunu güvenle yerinde bırakabilirsiniz (kısa süre sonra bunu Nuxt yapılandırmasından çıkaracağız).

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 }) => `./locales/${locale}.json`,
         location: "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

   Nuxt Yapılandırmasını Güncelleyin

   nuxt.config.ts dosyanızdaki @nuxtjs/i18n modülünü nuxt-intlayer ile değiştirin. Intlayer eklentisi, modül takma adlarını (alias) otomatik olarak enjekte eder. Böylece mevcut import { useI18n } from 'vue-i18n' kodlarınız şeffaf bir şekilde @intlayer/vue-i18n adresine yönlendirilir.

   nuxt.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   export default defineNuxtConfig({
     // '@nuxtjs/i18n' öğesini kaldırın
     modules: ["nuxt-intlayer"],
   });

   Artık Nuxt için bir i18n yapılandırma nesnesi (object) tanımlamanıza gerek kalmaz. Intlayer tüm sözlükleri derleme (build) zamanında derler, dil tespitini, yönlendirmeyi ve sözlük yüklemesini sorunsuz bir şekilde ele alır.

Hızlı geçiş bu kadar. Nuxt uygulamanız artık $t ve useI18n() kullanımınızı olduğu gibi koruyarak Intlayer üzerinde çalışmaktadır.

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'

   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 }) => `./locales/${locale}.json`,
         location: "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 @nuxtjs/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
• Nuxt İle Intlayer — Nuxt için tam kurulum rehberi: intlayerwithnuxt.md
• Vue İle Intlayer — Vue için tam kurulum rehberi: intlayerwithvite+vue.md