VueJS’te hazır paket kullanmadan çok dillilik nasıl yönetilir?

Artık hemen her uygulamanın birden çok dili var. Kullanıcıya birçok dil seçeneği sunmak hem erişilebilirliği artırıyor hem de uygulamanın karizmasına katkı sağlıyor. Çok dilliliği yönetmek için yaygın olarak kullanılan hazır paketler olmasalardı, kendimiz nasıl kurgulamalıydık, gelin inceleyelim.

Siz bugün bir i18n paketi yazsaydınız, standartları nasıl belirlerdiniz. Nelere dikkat ederdiniz, bundle size, kolay öğrenebilirlik, işlevsellik…

Bu sorulara birlikte yanıt arayalım. VueJS’in bazı özelliklerini de kullanarak kendi i18n’imizi yapalım. Aslında modern state yetenekleri dışında karmaşık bir özelliğine başvurmamıza gerek yok. Dolayısıyla kodu iyice anladığınızda herhangi bir JS framework’ü ile kopyasını kodlayabilirsiniz.

Hadi başlayalım

src altında locale adında bir klasör oluşturalım, bu klasör içerisinde hem dil JSON dosyalarımız hem de dil değişimini sağlayan fonksiyonları içeren language.js dosyamız olacak.

Yeni oluşturduğumuz locale klasörü içerisinde dillerimizi oluşturalım. en.json tr.json ru.json …

Bu küçük sevimli JSON dosyalarımızın içerisine yalnızca bir key value girelim, her şey tamamlandığında tüm dil değişkenlerimizi burada oluşturacağız.

İpucu: Hala denemediyseniz varsayılan dil dosyanızı herhangi bir LLM chat bot’a vererek, diğer dillerin dosyalarını otomatikman oluşturabilirsiniz. Elbette yine de bir profesyonel çevirmenin gözden geçirmesinde fayda var.

{
  "helloWorld": "Hello World :)"
}

Hayalimizde şu var. Herhangi bir uygulama sayfasında veya component’inde t adlı bir değişkenle bu key’leri çağırıp value’larına erişmek. Zaten dil değişimi denen şey tam olarak bu değil mi?

O zaman dil değişimi sağlayacak dosyamızı kodyalalım.

locale klasörü içerisinde language.js adında bir dosya oluşturalım.

// language.js
import { ref, computed } from 'vue'
import en from './en'
import tr from './tr'
import ru from './ru'

// Available Languages
const availableLanguages = [
  {
    code: 'EN',
    name: 'English',
    file: en,
  },
  {
    code: 'TR',
    name: 'Türkçe',
    file: tr,
  },
  {
    code: 'RU',
    name: 'Русский',
    file: ru,
  },
  // Add more languages here
]

// Current Language Code
const currentLanguageCode = ref('EN')

// Current Language File
const t = computed(
  () => availableLanguages.find((lang) => lang.code === currentLanguageCode.value).file
)

// Set Language
const setLanguage = (code) => {
  currentLanguageCode.value = code
  localStorage.setItem('language', code)
}

// Remember Language
if (localStorage.getItem('language')) {
  setLanguage(localStorage.getItem('language'))
}

export { availableLanguages, currentLanguageCode, t, setLanguage }

Gördüğünüz gibi neredeyse sadece JS yazarak dil değişim motorumuzu yaptık. Kullanıcının dili değiştirebilmesi için bir sayfada veya component’te setLanguage fonksiyonumuzu çağırıp, parametre olarak dil kodunu (Örneğin, ‘EN’) göndermemiz yeterli olacak.

<script setup>
// App.vue
import { t, availableLanguages, setLanguage, currentLanguageCode } from './locale/language'
</script>

<template>
  <h1>
    {{ t.helloWorld }}
  </h1>
  <select @change="setLanguage($event.target.value)" v-model="currentLanguageCode">
    <option v-for="lang in availableLanguages" :key="lang.code" :value="lang.code">
      {{ lang.name }}
    </option>
  </select>
</template>

Hepsi bu kadardı :) artık i18n’in nasıl çalıştığını biliyorsunuz, üstelik ona ihtiyaç duymadan kendi localization işlevlerinizi yazabiliyorsunuz.

Buradan hareketle çoklu para birimi süreçlerini yönetecek bir modülü de kendiniz kodlayabilirsiniz.

GitHub: https://github.com/gayret/multiple-language-on-vuejs

Canlı örnek: https://multiple-language-on-vuejs.netlify.app