0Pricing
Vue Academy · Ders

vue-i18n Kurulumu ve Mesaj Dosyaları

createI18n(), locale JSON dosyaları, {name} mesaj söz dizimi, iç içe anahtarlar ve yedek locale.

vue-i18n Kurulumu ve Mesaj Dosyaları, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

i18n nedir?

Uluslararasılaştırma (i18n), uygulamanızı metinleri birden çok dilde sunabilecek şekilde oluşturmaktır. Vue I18n, Vue uygulamalarını çevirmek için kullanılan resmî tarzdaki kütüphanedir.

İngilizce dizeleri doğrudan kodlamak yerine, etkin dile karşılık gelen anahtarları ararsınız.

Vue I18n'ı yükleme

Paketi ekleyin. Vue 3 için Composition API temel alınarak oluşturulan 9 veya sonraki bir sürümü kullanın.

// terminal
// npm install vue-i18n

Mesaj dosyaları

Çeviriler, her yerel ayar için bir tane olacak şekilde mesaj nesnelerinde bulunur. Anahtarlar, çevrilmiş dizelere karşılık gelir. İngilizce ile başlayın.

const en = {
  greeting: "Hello",
  nav: {
    home: "Home",
    about: "About",
  },
}

Türkçe yerel ayarı ekleme

Her anahtarın her dilde bulunabilmesi için her yerel ayar aynı anahtar yapısını yansıtır.

const tr = {
  greeting: "Merhaba",
  nav: {
    home: "Ana Sayfa",
    about: "Hakkinda",
  },
}

i18n örneğini oluşturma

createI18n, örneği oluşturur. locale değerini (etkin dil), fallbackLocale değerini (bir anahtar eksik olduğunda kullanılan dil) ve messages eşlemesini ayarlayın.

import { createI18n } from "vue-i18n"

const i18n = createI18n({
  legacy: false,
  locale: "en",
  fallbackLocale: "en",
  messages: { en, tr },
})

Neden legacy: false?

legacy: false ayarı, modern Vue 3 uygulamalarının kullandığı Composition API kipini etkinleştirir. Bir sonraki derste tanışacağınız useI18n bileştirilebilir işlevini kullanıma açar.

const i18n = createI18n({
  legacy: false, // Composition API mode
  locale: "en",
  messages: { en, tr },
})

Uygulamaya kaydetme

Örneği app.use(i18n) ile bir eklenti olarak yükleyin. Bu, çeviri yardımcılarını bileşen ağacının tamamında kullanılabilir hâle getirir.

import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)
app.use(i18n)
app.mount("#app")

Şablonlarda $t kullanma

Yüklendikten sonra her şablon, etkin yerel ayardaki çeviriyi aramak için $t(key) çağrısını yapabilir.

<template>
  <h1>{{ $t("greeting") }}</h1>
  <a>{{ $t("nav.home") }}</a>
</template>

fallbackLocale nasıl çalışır?

Etkin yerel ayarda bir anahtar eksikse Vue I18n, ham anahtarı göstermek yerine fallbackLocale değerine geri döner. Bu, çeviriler hazırlanırken kullanıcı arayüzünün anlaşılır kalmasını sağlar.

// tr is missing "tagline" -> falls back to en
// {{ $t("tagline") }} renders the English text

Yer tutucularla değer yerleştirme

Mesajlar, süslü parantezler içinde adlandırılmış yer tutucular içerebilir. Bunları doldurmak için değerleri ikinci bağımsız değişken olarak geçin.

const en = {
  welcome: "Welcome, {name}!",
}

// template:
// {{ $t("welcome", { name: "Ada" }) }}
// => "Welcome, Ada!"

Mesaj dosyalarını düzenleme

Gerçek uygulamalarda her yerel ayarı kendi dosyasına (en.json, tr.json) koyup içe aktarın. Bu, çevirilerin yönetilebilir kalmasını sağlar ve çevirmenlerin bağımsız çalışmasına olanak verir.

// locales/en.json, locales/tr.json
import en from "./locales/en.json"
import tr from "./locales/tr.json"

createI18n({ locale: "en", messages: { en, tr } })

Hızlı kontrol

Vue I18n kurulumuyla ilgili anlayışınızı kontrol edin.

Özet

Vue I18n'ı kurdunuz:

  • i18n, anahtarları arayarak metinleri birden çok dilde sunmak anlamına gelir.
  • Her yerel ayar için aynı anahtar yapısına sahip bir mesaj nesnesi tanımlayın.
  • createI18n, locale, fallbackLocale ve messages değerlerini alır; Composition kipinde legacy: false kullanın.
  • app.use(i18n) ile yükleyin ve şablonlarda $t(key) ile çeviri yapın.
  • {name} gibi yer tutucular ikinci bağımsız değişken aracılığıyla doldurulur.

Sıkça Sorulan Sorular

“vue-i18n Kurulumu ve Mesaj Dosyaları” dersi ücretsiz mi?

Evet — “vue-i18n Kurulumu ve Mesaj Dosyaları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“vue-i18n Kurulumu ve Mesaj Dosyaları” dersinde ne öğreneceğim?

createI18n(), locale JSON dosyaları, {name} mesaj söz dizimi, iç içe anahtarlar ve yedek locale. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“vue-i18n Kurulumu ve Mesaj Dosyaları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. vue-i18n Kurulumu ve Mesaj Dosyaları
  2. useI18n Composable'ı ve t() İşlevi
  3. Çoğullaştırma ve Bağlantılı Mesajlar
  4. Sayı, Tarih ve Para Birimi Biçimlendirme
← Vue Academy Sayfasına Dön