Vue.js Uygulamalarında vue-i18n ile Uluslararasılaşma (i18n) Entegrasyonu

Vue.js Uygulamalarında vue-i18n ile Uluslararasılaşma (i18n) Entegrasyonu

Giriş: Uluslararasılaşma (i18n) Nedir ve Neden Önemlidir?

Günümüz küresel dijital dünyasında, yazılım uygulamalarının farklı dilleri ve kültürel tercihleri desteklemesi bir lüks olmaktan çıkıp temel bir gereksinim haline gelmiştir. İşte tam bu noktada uluslararasılaşma (internationalization – i18n) kavramı devreye girer. i18n, bir yazılım uygulamasının farklı dilleri ve bölgeleri destekleyecek şekilde tasarlanması ve geliştirilmesi sürecini ifade eder. “i18n” kısaltması, “internationalization” kelimesindeki ‘i’ harfi ile ‘n’ harfi arasında 18 harf bulunmasından gelir. Bu süreç, sadece metinlerin çevrilmesini değil, aynı zamanda tarih, saat, sayı formatları, para birimleri ve hatta sağdan sola yazım gibi kültürel farklılıkların da dikkate alınmasını kapsar.

Uluslararasılaşmanın yakın bir kuzeni ise yerelleştirme (localization – l10n) kavramıdır. l10n, i18n süreciyle hazırlanmış bir uygulamanın belirli bir dil ve kültürel bölgeye (locale) uyarlanması işlemidir. Bu, çevirileri yapmak, kültürel olarak uygun görselleri seçmek ve bölgesel standartlara göre formatları ayarlamak gibi adımları içerir. Kısacası, i18n uygulamayı küresel pazara hazır hale getirirken, l10n bu hazırlığı belirli pazarlara özel hale getirir.

Neden i18n Önemlidir?

Uygulamalarınızda i18n kullanmanın birçok önemli avantajı vardır:

* Geniş Kitlelere Ulaşım: Uygulamanızı birden fazla dilde sunarak, dil bariyeri nedeniyle erişemeyeceğiniz milyonlarca potansiyel kullanıcıya kapı aralarsınız. Bu, pazar payınızı önemli ölçüde artırabilir.
* Gelişmiş Kullanıcı Deneyimi: Kullanıcılar, kendi ana dillerinde bir uygulama kullandıklarında kendilerini daha rahat ve güvende hissederler. Bu, uygulamanızla etkileşimlerini artırır ve daha olumlu bir deneyim sunar.
* Rekabet Avantajı: Özellikle niş pazarlarda, yerelleştirilmiş bir uygulama sunmak, rakiplerinize karşı önemli bir avantaj sağlayabilir.
* Kültürel Hassasiyet: Farklı kültürlerin normlarına ve beklentilerine saygı göstermek, marka itibarınızı güçlendirir ve küresel çapta daha kabul edilebilir bir imaj yaratır.
* Sürdürülebilirlik ve Ölçeklenebilirlik: Uygulamayı baştan i18n uyumlu hale getirmek, gelecekte yeni diller eklemeyi çok daha kolay ve maliyetsiz hale getirir.

Vue.js, modern ve reaktif kullanıcı arayüzleri oluşturmak için popüler bir JavaScript çerçevesidir. Vue ekosistemi, i18n entegrasyonunu kolaylaştırmak için güçlü bir kütüphane olan vue-i18n‘i sunar. Bu makalede, vue-i18n kütüphanesini kullanarak Vue.js uygulamalarınıza uluslararasılaşma yeteneklerini nasıl entegre edeceğinizi adım adım inceleyeceğiz.

vue-i18n Kütüphanesine Giriş

vue-i18n, Vue.js uygulamaları için resmi olarak önerilen ve en çok kullanılan uluslararasılaşma kütüphanesidir. Geliştiricilere, çok dilli uygulamalar oluşturmak için kapsamlı ve kullanımı kolay bir API sunar.

vue-i18n’in Temel Özellikleri

* Basit ve Sezgisel API: Mesaj çevirileri, parametre ekleme, çoğulculuk, tarih ve sayı formatlama gibi işlemleri kolaylaştıran temiz bir API’ye sahiptir.
* Vue Entegrasyonu: Vue bileşenleriyle sorunsuz bir şekilde entegre olur. $t, $tc, $d, $n gibi global inject edilen yöntemler ve bileşeni aracılığıyla kolayca erişilebilir.
* Dinamik Dil Değişimi: Çalışma zamanında dil değiştirme yeteneği sunar, böylece kullanıcılar istedikleri zaman uygulama dilini değiştirebilirler.
* Çoğulculuk Kuralları: Farklı dillerin karmaşık çoğulculuk kurallarını (örneğin, İngilizce’de tekil/çoğul, Arapça’da 6 farklı form) destekler.
* Tarih ve Sayı Formatlama: Belirli bir dilin kültürel kurallarına göre tarihleri, saatleri ve sayıları formatlama yeteneği sağlar.
* Modüler Yapı: Dil dosyalarını ayrı ayrı yönetmeye olanak tanır, bu da büyük uygulamalarda organizasyonu kolaylaştırır.
* Lazy Loading (Tembel Yükleme) Desteği: Performansı artırmak için dil dosyalarını yalnızca ihtiyaç duyulduğunda yüklemeye olanak tanır.

Kurulum

vue-i18n‘i projenize eklemek oldukça basittir. npm veya yarn kullanarak yükleyebilirsiniz:

# npm ile
npm install vue-i18n@next

yarn ile
yarn add vue-i18n@next

Bu makale yazıldığı sırada vue-i18n‘in 9.x sürümü (Vue 3 ile uyumlu) en güncel sürümdür. @next etiketiyle en son kararlı sürümü alırsınız. Vue 2 kullanıyorsanız, vue-i18n@8 sürümünü kullanmanız gerekir.

Temel Kullanım: Mesajları Tanımlama ve Görüntüleme

vue-i18n‘i bir Vue.js uygulamasında kullanmaya başlamak için öncelikle bir i18n örneği oluşturmamız ve bunu Vue uygulamamıza entegre etmemiz gerekir.

i18n Örneği Oluşturma

Genellikle, src/main.js veya ayrı bir i18n.js dosyasında i18n örneğini oluştururuz.

// src/i18n.js
import { createI18n } from 'vue-i18n';

// Dil mesajlarını tanımlayın
const messages = {
  en: {
    message: {
      hello: 'Hello world',
      welcome: 'Welcome to our application!',
      greeting: 'Good morning!',
      farewell: 'Goodbye!'
    }
  },
  tr: {
    message: {
      hello: 'Merhaba dünya',
      welcome: 'Uygulamamıza hoş geldiniz!',
      greeting: 'Günaydın!',
      farewell: 'Güle güle!'
    }
  }
};

// i18n örneğini oluşturun
const i18n = createI18n({
  locale: 'en', // Varsayılan dil
  fallbackLocale: 'en', // Bir çeviri bulunamazsa kullanılacak yedek dil
  messages, // Dil mesajları
  legacy: false, // Composition API ile uyumluluk için Vue 3'te gereklidir
  globalInjection: true // Global $t, $tc, vb. kullanımını etkinleştirir
});

export default i18n;

Ardından, bu i18n örneğini Vue uygulamamıza entegre etmeliyiz:

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n'; // i18n örneğini içe aktarın

const app = createApp(App);

app.use(i18n); // i18n eklentisini kullan

app.mount('#app');

Vue Bileşenlerinde this.$t() Kullanımı

i18n örneğini Vue uygulamamıza entegre ettikten sonra, herhangi bir bileşen içinde this.$t() yöntemini kullanarak çevrilmiş mesajlara erişebiliriz. globalInjection: true ayarı sayesinde $t global olarak erişilebilir hale gelir.

Yukarıdaki örnekte, {{ $t('message.hello') }} ifadesi, mevcut locale‘e (dil) göre messages objesindeki message.hello anahtarının değerini döndürecektir. Eğer mevcut dil ‘en’ ise “Hello world”, ‘tr’ ise “Merhaba dünya” görüntülenecektir.

Tek Dosya Bileşenlerinde (.vue) Bloğu Kullanımı

Bazen, belirli bir bileşene özgü çevirileriniz olabilir ve bunları global messages objesine eklemek istemeyebilirsiniz. vue-i18n, tek dosya bileşenlerinde özel bloğu aracılığıyla yerel çevirileri tanımlamanıza olanak tanır.

{
  "en": {
    "component": {
      "title": "My Local Component",
      "description": "This is a description specific to this component."
    }
  },
  "tr": {
    "component": {
      "title": "Yerel Bileşenim",
      "description": "Bu, bu bileşene özgü bir açıklamadır."
    }
  }
}

Bu yöntem, bileşenin çevirilerini doğrudan bileşenin kendisiyle birlikte tutarak modülerliği artırır ve büyük uygulamalarda çeviri yönetimini kolaylaştırır. Yerel çeviriler, global çevirileri geçersiz kılabilir.

Mesaj Dosyası Yapısı

Çeviri mesajlarını ayrı JSON dosyalarında tutmak, özellikle büyük projelerde daha iyi organizasyon sağlar. Her dil için ayrı bir JSON dosyası oluşturmak yaygın bir yaklaşımdır.

src/
├── locales/
│   ├── en.json
│   └── tr.json
├── App.vue
├── main.js
└── ...

src/locales/en.json:

{
  "message": {
    "hello": "Hello world",
    "welcome": "Welcome to our application!",
    "greeting": "Good morning!",
    "farewell": "Goodbye!"
  },
  "button": {
    "submit": "Submit",
    "cancel": "Cancel"
  }
}

src/locales/tr.json:

{
  "message": {
    "hello": "Merhaba dünya",
    "welcome": "Uygulamamıza hoş geldiniz!",
    "greeting": "Günaydın!",
    "farewell": "Güle güle!"
  },
  "button": {
    "submit": "Gönder",
    "cancel": "İptal"
  }
}

src/i18n.js (güncellenmiş):

import { createI18n } from 'vue-i18n';
import en from './locales/en.json';
import tr from './locales/tr.json';

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en, // ES6 kısayolu: en: en
    tr  // ES6 kısayolu: tr: tr
  },
  legacy: false,
  globalInjection: true
});

export default i18n;

Bu yapı, çeviri dosyalarını daha düzenli hale getirir ve yönetimi kolaylaştırır.

Dinamik Mesajlar ve Parametreler

Çoğu zaman, çeviri mesajlarınızın dinamik değerler içermesi gerekir. Örneğin, “Merhaba, [kullanıcı adı]!” veya “[ürün sayısı] ürün sepetinizde.” gibi ifadeler. vue-i18n, bu tür dinamik değerleri mesajlara enjekte etmek için yer tutucular (placeholders) kullanmanıza olanak tanır.

Yer Tutucular

Mesajlarınızda süslü parantezler {} kullanarak yer tutucular tanımlayabilirsiniz. this.$t() yöntemine ikinci bir argüman olarak bir JavaScript objesi geçirerek bu yer tutucuların değerlerini sağlayabilirsiniz.

en.json:

{
  "welcome_user": "Welcome, {username}!",
  "item_count": "You have {count} items in your cart."
}

tr.json:

{
  "welcome_user": "Hoş geldiniz, {username}!",
  "item_count": "Sepetinizde {count} adet ürün var."
}

Vue Bileşeni:

Bu, sırasıyla “Welcome, Alice!” ve “Hoş geldiniz, Alice!” gibi çıktılar üretecektir.

Sayısal Yer Tutucular

Yer tutucular için sayısal indeksler de kullanabilirsiniz. Bu, özellikle sıralı parametreleriniz olduğunda kullanışlı olabilir.

en.json:

{
  "greeting_full": "Hello {0}, your ID is {1}."
}

tr.json:

{
  "greeting_full": "Merhaba {0}, kimliğiniz {1}."
}

Vue Bileşeni:

Bu, “Hello Bob, your ID is 12345.” çıktısını verecektir.

HTML İçeriği ile Mesajlar

Bazen çeviri mesajlarınızın içinde HTML etiketleri bulunabilir. v-html direktifini kullanarak bu HTML içeriğini güvenli bir şekilde render edebilirsiniz. Ancak, XSS saldırılarına karşı dikkatli olmalısınız ve yalnızca güvendiğiniz kaynaklardan gelen HTML’i kullanmalısınız.

en.json:

{
  "html_message": "Please visit our contact page for more information."
}

tr.json:

{
  "html_message": "Daha fazla bilgi için lütfen iletişim sayfamızı ziyaret edin."
}

Vue Bileşeni:

Bu, “Please visit our contact page for more information.” şeklinde bir çıktı üretecektir, “contact page” kısmı kalın yazılı olacaktır.

Çoğulculuk (Pluralization)

Çoğulculuk, i18n’in en karmaşık yönlerinden biridir çünkü diller arasında büyük farklılıklar gösterir. İngilizce’de genellikle tekil ve çoğul olmak üzere iki form varken (0 hariç), bazı dillerde (örneğin Arapça, Lehçe, Rusça) çok daha fazla çoğul form bulunabilir. vue-i18n, bu karmaşıklığı yönetmek için this.$tc() (translate plural) yöntemini sunar.

Çoğulculuk Kuralları

vue-i18n, CLDR (Common Locale Data Repository) çoğulculuk kurallarını takip eder. Bu kurallar, bir sayının hangi çoğul kategoriye (zero, one, two, few, many, other) girdiğini belirler.

Mesajlarda çoğul formları, dikey çizgi | ile ayırarak tanımlarsınız.

en.json:

{
  "apple": "no apples | one apple | {count} apples",
  "car": "{count} car | {count} cars"
}

tr.json:

{
  "apple": "hiç elma yok | bir elma | {count} elma",
  "car": "{count} araba"
}

Vue Bileşeni:

$tc() yönteminin ilk argümanı çeviri anahtarı, ikinci argümanı ise çoğul formunu belirlemek için kullanılacak sayıdır. Üçüncü argüman olarak bir parametre objesi de geçirebilirsiniz:

{count} parametresi, $tc‘ye geçirilen sayısal değerle otomatik olarak doldurulur, ancak açıkça belirtmek daha okunabilir olabilir.

Türkçe gibi dillerde genellikle sadece tekil ve çoğul form bulunur (sıfır için ayrı bir form olmaksızın). Bu durumda, ilk form tekil (1 için), ikinci form ise diğer tüm sayılar içindir.

Tarih ve Saat Formatlama

vue-i18n, this.$d() (translate date) yöntemi ile tarih ve saat değerlerini belirli bir dilin kültürel kurallarına göre formatlamanıza olanak tanır. Bunun için datetimeFormats seçeneğini createI18n örneğine eklemeniz gerekir.

// src/i18n.js
import { createI18n } from 'vue-i18n';
import en from './locales/en.json';
import tr from './locales/tr.json';

const datetimeFormats = {
  en: {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    },
    long: {
      year: 'numeric', month: 'long', day: 'numeric',
      hour: 'numeric', minute: 'numeric', second: 'numeric'
    }
  },
  tr: {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    },
    long: {
      year: 'numeric', month: 'long', day: 'numeric',
      hour: 'numeric', minute: 'numeric', second: 'numeric',
      hour12: false // 24 saat formatı için
    }
  }
};

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: { en, tr },
  datetimeFormats, // Tarih formatlarını ekleyin
  legacy: false,
  globalInjection: true
});

export default i18n;

datetimeFormats objesi, her dil için farklı format şablonları tanımlamanıza olanak tanır. Bu şablonlar, Intl.DateTimeFormat API’sinin seçeneklerini kullanır.

Vue Bileşeni:

$d() yönteminin ilk argümanı formatlanacak Date objesi veya sayısal zaman damgasıdır. İkinci argüman format şablonunun adıdır (örneğin ‘short’, ‘long’). Üçüncü argüman ise isteğe bağlı olarak kullanılacak dildir; belirtilmezse mevcut locale kullanılır.

Sayı Formatlama

Tıpkı tarih ve saat gibi, sayıları da farklı dillerin ve bölgelerin kurallarına göre formatlamak önemlidir (ondalık ayırıcılar, binlik ayırıcılar, para birimi sembolleri vb.). vue-i18n, this.$n() (translate number) yöntemi ve numberFormats seçeneği ile bu yeteneği sunar.

// src/i18n.js
import { createI18n } from 'vue-i18n';
import en from './locales/en.json';
import tr from './locales/tr.json';

const numberFormats = {
  en: {
    currency: {
      style: 'currency', currency: 'USD', notation: 'standard'
    },
    decimal: {
      style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2
    },
    percent: {
      style: 'percent', useGrouping: false
    }
  },
  tr: {
    currency: {
      style: 'currency', currency: 'TRY', notation: 'standard'
    },
    decimal: {
      style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2
    },
    percent: {
      style: 'percent', useGrouping: false
    }
  }
};

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: { en, tr },
  datetimeFormats,
  numberFormats, // Sayı formatlarını ekleyin
  legacy: false,
  globalInjection: true
});

export default i18n;

numberFormats objesi, her dil için farklı format şablonları tanımlamanıza olanak tanır. Bu şablonlar, Intl.NumberFormat API’sinin seçeneklerini kullanır.

Vue Bileşeni:

$n() yönteminin ilk argümanı formatlanacak sayıdır. İkinci argüman format şablonunun adıdır (örneğin ‘currency’, ‘decimal’, ‘percent’). Üçüncü argüman ise isteğe bağlı olarak kullanılacak dildir; belirtilmezse mevcut locale kullanılır.

Dil Değiştirme Mekanizmaları

Kullanıcıların uygulama dilini kolayca değiştirebilmeleri, i18n’in temel bir parçasıdır. vue-i18n, i18n.locale özelliğini güncelleyerek bu işlemi son derece basit hale getirir.

Kullanıcı Arayüzünden Dil Değiştirme

Genellikle, bir dil seçici (dropdown menü) veya bir dizi düğme aracılığıyla dil değiştirme işlevi sunulur.

this.$i18n.locale özelliğini değiştirdiğinizde, vue-i18n otomatik olarak tüm bileşenlerdeki çevirileri yeni dile göre güncelleyecektir.

Dil Tercihini Saklama

Kullanıcının seçtiği dilin uygulama kapatıldığında veya sayfa yenilendiğinde kaybolmaması önemlidir. Bu tercihi localStorage veya çerezlerde saklayabilirsiniz.

// src/i18n.js (güncellenmiş)
import { createI18n } from 'vue-i18n';
import en from './locales/en.json';
import tr from './locales/tr.json';

// Kullanıcının tercih ettiği dili localStorage'dan alın
const savedLocale = localStorage.getItem('user-locale') || 'en';

const i18n = createI18n({
  locale: savedLocale, // Varsayılan dili kayıtlı dile ayarlayın
  fallbackLocale: 'en',
  messages: { en, tr },
  datetimeFormats,
  numberFormats,
  legacy: false,
  globalInjection: true
});

export default i18n;

Vue Bileşeni (Dil değişimini kaydetmek için):

Bu yaklaşım, kullanıcının dil tercihinin oturumlar arasında kalıcı olmasını sağlar.

Gelişmiş Konular ve En İyi Uygulamalar

vue-i18n‘i temel düzeyde kullanmayı öğrendikten sonra, uygulamanızın performansını ve sürdürülebilirliğini artırmak için bazı gelişmiş konuları ve en iyi uygulamaları göz önünde bulundurmak önemlidir.

Lazy Loading (Tembel Yükleme) ile Dil Dosyalarını Yükleme

Uygulamanız çok sayıda dili destekliyorsa ve her dilin çeviri dosyaları büyükse, tüm dil dosyalarını başlangıçta yüklemek uygulamanızın başlangıç süresini (initial load time) artırabilir. Lazy loading, yalnızca ihtiyaç duyulan dil dosyasını yükleyerek bu sorunu çözer. Bu, genellikle Webpack gibi modül paketleyicilerinin dinamik import() fonksiyonu ile yapılır.

// src/i18n.js
import { createI18n } from 'vue-i18n';

// Varsayılan ve yedek dili belirle
const defaultLocale = localStorage.getItem('user-locale') || 'en';

const i18n = createI18n({
  locale: defaultLocale,
  fallbackLocale: 'en',
  messages: {}, // Başlangıçta boş mesajlar
  legacy: false,
  globalInjection: true
});

// Dinamik olarak dil yükleme fonksiyonu
export async function loadLocaleMessages(locale) {
  if (!i18n.global.availableLocales.includes(locale)) {
    const messages = await import(./locales/${locale}.json);
    i18n.global.setLocaleMessage(locale, messages.default);
  }
  return Promise.resolve();
}

// Uygulama başlangıcında varsayılan dili yükle
loadLocaleMessages(defaultLocale);

export default i18n;

main.js içinde:

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import i18n, { loadLocaleMessages } from './i18n';

const app = createApp(App);

app.use(i18n);

// İlk yüklemede, mevcut dili yüklediğimizden emin olun
// i18n.global.locale.value, Composition API'de reaktif bir ref'tir.
// Options API'de this.$i18n.locale kullanılır.
loadLocaleMessages(i18n.global.locale.value).then(() => {
  app.mount('#app');
});

Vue Bileşeni (Dil değiştirirken lazy loading):

Bu yapı, kullanıcı bir dil seçtiğinde veya uygulama ilk kez yüklendiğinde yalnızca ilgili dil dosyasının indirilmesini sağlar, bu da uygulamanın başlangıç performansını önemli ölçüde artırır.

Global i18n Instance vs. Local i18n Instance

vue-i18n‘i genellikle global bir örnek olarak (app.use(i18n)) kullanırız. Bu, $t, $tc gibi yöntemlere uygulamanın her yerinden erişilebilmesini sağlar. Ancak, bazı özel durumlarda (örneğin, izole edilmiş bir widget veya çok özel çeviri ihtiyaçları olan bir bileşen için) yerel bir i18n örneği oluşturmak isteyebilirsiniz.

Yerel bir i18n örneği oluşturmak için, bileşenin i18n seçeneğini kullanabilirsiniz:

Bu yöntem, bileşene özgü çevirileri global kapsamı kirletmeden yönetmek için kullanışlıdır. Ancak çoğu durumda global bir i18n örneği ve blokları yeterlidir.

Vue Router ile Entegrasyon

Uygulamanızın URL’sinde dil bilgisini bulundurmak (örneğin, /en/about veya /tr/hakkinda), SEO için ve kullanıcıların belirli bir dildeki içeriği doğrudan paylaşabilmesi için faydalı olabilir. Vue Router ile vue-i18n‘i entegre etmek için, rota tanımınıza bir dil parametresi ekleyebilirsiniz.

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import i18n from '../i18n';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/:locale', // Dil parametresi
    beforeEnter: (to, from, next) => {
      const locale = to.params.locale;
      // Desteklenen diller listesini kontrol et
      const supportedLocales = i18n.global.availableLocales;
      if (!supportedLocales.includes(locale)) {
        // Desteklenmeyen bir dilse varsayılan dile yönlendir
        return next(/${i18n.global.fallbackLocale});
      }
      // Dili ayarla
      i18n.global.locale.value = locale;
      return next();
    },
    children: [
      {
        path: '',
        name: 'Home',
        component: Home
      },
      {
        path: 'about',
        name: 'About',
        component: About
      }
    ]
  },
  {
    // Varsayılan olarak dil parametresi olmayan rotaları varsayılan dile yönlendir
    path: '/:pathMatch(.)',
    redirect: /${i18n.global.locale.value}
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

Bu yapı, URL’deki dil parametresine göre uygulamanın dilini otomatik olarak ayarlar. Ayrıca, kullanırken dil parametresini de belirtmeniz gerekir:

SEO ve i18n

Çok dilli uygulamalar için SEO’yu optimize etmek, arama motorlarının içeriğinizin farklı dil ve bölge sürümlerini anlamasına yardımcı olmak için kritik öneme sahiptir. hreflang etiketleri bu konuda en yaygın kullanılan yöntemdir. Bu etiketler, bir sayfanın alternatif dil sürümlerini belirtir.

Örneğin, index.html dosyanızın bölümüne aşağıdaki gibi etiketler ekleyebilirsiniz:

Vue uygulamalarında, bu etiketleri dinamik olarak yönetmek için vue-meta veya vue-head gibi kütüphaneleri kullanabilirsiniz.

Test Etme

i18n entegrasyonunu test etmek, çevirilerin doğru yüklendiğinden, dinamik mesajların doğru çalıştığından ve dil değiştirme işlevinin sorunsuz olduğundan emin olmak için önemlidir. Birim testlerinde, vue-i18n örneğini mock’layabilir ve $t, $tc gibi yöntemlerin beklenen çıktıları döndürüp döndürmediğini kontrol edebilirsiniz. E2E (uçtan uca) testlerinde ise, farklı dilleri seçerek ve uygulamanın tüm çevirilerinin doğru görüntülendiğini doğrulayarak gerçek kullanıcı senaryolarını test edebilirsiniz.

Bakım ve Yönetim

Çeviri dosyalarının zamanla büyüyebileceği ve yönetilmesi zorlaşabileceği unutulmamalıdır.
* Anahtar İsimlendirme: Anlamlı ve tutarlı anahtar isimleri kullanın (örneğin, user.profile.name, button.submit).
* Çeviri Araçları: Büyük projeler için, çeviri yönetim sistemleri (TMS) veya platformları (Transifex, Lokalise, Crowdin) kullanmayı düşünün. Bu araçlar, çeviri sürecini kolaylaştırır, çevirmenlerle işbirliğini sağlar ve tutarlılığı artırır.
* Eksik Çevirileri Yönetme: fallbackLocale ayarı, eksik çeviriler durumunda yedek bir dil sağlamak için kritik öneme sahiptir. Ayrıca, geliştirme ortamında eksik çevirileri tespit etmek için uyarılar veya özel hata işleyicileri kullanabilirsiniz.

Sonuç

Vue.js uygulamalarında uluslararasılaşma (i18n) entegrasyonu, uygulamanızın küresel pazarda rekabetçi olmasını sağlayan ve kullanıcı deneyimini önemli ölçüde artıran kritik bir adımdır. vue-i18n kütüphanesi, Vue ekosistemindeki en güçlü ve esnek i18n çözümlerinden biridir.

Bu makalede, vue-i18n‘i projenize nasıl kuracağınızı, temel mesaj çevirilerinden dinamik parametrelere, çoğulculuktan tarih ve sayı formatlamaya kadar çeşitli kullanım senaryolarını ele aldık. Ayrıca, dil değiştirme mekanizmaları, lazy loading ile performans optimizasyonu, Vue Router ile entegrasyon, SEO ve en iyi bakım uygulamaları gibi gelişmiş konulara da değindik.

vue-i18n‘in sunduğu kapsamlı özellikler sayesinde, uygulamanızı farklı dillerde ve kültürlerde sorunsuz bir şekilde sunabilir, dünya çapındaki kullanıcı tabanınıza ulaşarak onların kendi dillerinde bir deneyim yaşamasını sağlayabilirsiniz. Bu, sadece teknik bir gereklilik değil, aynı zamanda kullanıcılarınıza değer verdiğinizi gösteren stratejik bir yatırımdır. Uygulamanızı uluslararasılaştırmak için vue-i18n‘i kullanmaya başlamak, küresel bir başarıya giden yolda atacağınız önemli bir adımdır.