Skip to main content

Vue i18n: vue-i18n ile eksiksiz uluslararasılaştırma kurulumu

Kurulumdan üretime kadar vue-i18n'i Composition API ile yapılandırın, çoğul biçimleri CLDR kurallarıyla yönetin, bileşen yerleştirmeyi kullanın ve akıllı yerel ayar geri dönüş zincirleri ekleyin.

1

vue-i18n'i yükleyin

vue-i18n, Vue.js'in resmî uluslararasılaştırma eklentisidir. Tepkisel çeviriler, ICU tarzı çoğul biçimleri, bileşen yerleştirme, tarih-saat ve sayı biçimlendirme ile hem Options API hem de Composition API desteği sağlar.

Terminal
npm install vue-i18n@9
2

vue-i18n'i yapılandırın

createI18n() ile bir i18n örneği oluşturun ve bunu Vue eklentisi olarak kaydedin. Yerel ayar iletilerinizi tanımlayın, varsayılan yerel ayarı belirleyin ve geri dönüş yerel ayarını yapılandırın. vue-i18n hem eski (Options API) hem de bileşim (Composition API) modlarını destekler.

src/i18n.ts
// src/i18n.ts
import { createI18n } from 'vue-i18n'
import en from './locales/en.json'
import de from './locales/de.json'

const i18n = createI18n({
  legacy: false,           // Use Composition API mode
  locale: 'en',            // Default locale
  fallbackLocale: 'en',   // Fallback locale
  messages: { en, de },
})

export default i18n
src/main.ts
// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

const app = createApp(App)
app.use(i18n)
app.mount('#app')
'Not available in legacy mode' hatalarını görüyorsanız Composition API i18n çağrılarını (useI18n()) eski mod yapılandırmasıyla karıştırıyorsunuz. Composition API modunu kullanmak için createI18n() içinde legacy: false ayarını belirleyin veya Options API $t() söz dizimini tutarlı biçimde kullanın.
3

Şablonlarda çevirileri kullanın

vue-i18n, şablonlarda $t() işlevini (Options API) ve useI18n() tarafından sağlanan t() işlevini (Composition API) sunar. Her ikisi de çeviri anahtarını ve yerleştirme için isteğe bağlı adlandırılmış/liste parametrelerini kabul eder.

src/locales/en.json
// src/locales/en.json
{
  "nav": {
    "home": "Home",
    "about": "About",
    "settings": "Settings"
  },
  "greeting": "Hello, {name}!",
  "cart": {
    "itemCount": "no items | one item | {count} items"
  }
}

// src/locales/de.json
{
  "nav": {
    "home": "Startseite",
    "about": "Über uns",
    "settings": "Einstellungen"
  },
  "greeting": "Hallo, {name}!",
  "cart": {
    "itemCount": "keine Artikel | ein Artikel | {count} Artikel"
  }
}
4

Çoğul biçimleri yönetin

vue-i18n, dikey çizgiyle ayrılmış biçimler ve $tc() işlevi (eski mod) ya da count parametreli t() işlevi (Composition API) aracılığıyla çoğul biçimlerini destekler. Yerel ayar iletilerinizde çoğul biçimlerini dikey çizgi ayırıcısıyla tanımlayın: 'öğe yok | bir öğe | {count} öğe'.

MyComponent.vue
<template>
  <div>
    <!-- Simple translation -->
    <h1>{{ $t('nav.home') }}</h1>

    <!-- With variables -->
    <p>{{ $t('greeting', { name: userName }) }}</p>

    <!-- In attributes -->
    <input :placeholder="$t('nav.settings')" />

    <!-- Composition API -->
    <p>{{ greeting }}</p>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const userName = 'Alice'
const greeting = t('greeting', { name: userName })
</script>
Dikey çizgiyle ayrılmış çoğul söz dizimi yalnızca en fazla üç biçimli (zero | one | other) sayısal çoğulları destekler. Karmaşık CLDR çoğul kurallarına sahip dillerde (Arapça, Rusça, Lehçe) ICU MessageFormat söz dizimini veya açık CLDR kategori eşlemeleriyle @.plural değiştiricisini kullanın.
5

Yerel ayar geri dönüş zincirleri ekleyin

vue-i18n'in yerleşik fallbackLocale özelliği, yerel ayar başına zincirleri değil yalnızca düz bir geri dönüş yerel ayarları listesini destekler. Eksik anahtarla karşılaşan pt-BR kullanıcısı pt-PT yerine İngilizceye geri döner. vue-i18n-locale-chain, yapılandırılabilir derin birleştirme zincirleri ekleyerek bölgesel kullanıcıların her zaman mevcut en yakın çeviriyi görmesini sağlar.

Plurals.vue
<template>
  <div>
    <!-- Pipe-separated plurals -->
    <p>{{ $t('cart.itemCount', count) }}</p>

    <!-- Named plurals (recommended for complex languages) -->
    <p>{{ $t('orders', { n: orderCount }) }}</p>
  </div>
</template>

<!-- In your locale file: -->
<!-- "orders": "{n} order | {n} orders" -->
vue-i18n-locale-chain, iletileri yükleme sırasında derinlemesine birleştirir. Birleştirilmiş ileti kümesi vue-i18n'in tepkisellik sistemi tarafından önbelleğe alındığından geri dönüş aramalarının çalışma zamanı performansına etkisi yoktur.
6

Çevirileri otomatikleştirin

vue-i18n yapılandırıldıktan sonra yerel ayar JSON dosyalarınızı yapay zeka kullanarak çevirin. IDE'nizden yapay zeka yardımcınızdan kaynak dosyayı çevirmesini isteyin veya tamamen otomatik yerelleştirme için çeviriyi CI/CD işlem hattınıza ekleyin.

LanguageSwitcher.vue
<template>
  <select v-model="locale">
    <option v-for="lang in availableLocales" :key="lang" :value="lang">
      {{ lang }}
    </option>
  </select>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { locale, availableLocales } = useI18n()
</script>
src/i18n.ts (lazy loading)
// src/i18n.ts
import { createI18n } from 'vue-i18n'

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

export async function loadLocale(locale: string) {
  const messages = await import(`./locales/${locale}.json`)
  i18n.global.setLocaleMessage(locale, messages.default)
  i18n.global.locale.value = locale
}

export default i18n
7

Yerel ayar geri dönüş zinciri yapılandırması

Bölgesel kullanıcıların doğrudan İngilizceye geçmek yerine mevcut en yakın çeviriyi görmesi için yerel ayar başına geri dönüş zincirleri yapılandırın. vue-i18n, yerel ayar başına zincir tanımlamak amacıyla nesne tarzı fallbackLocale kullanımını destekler.

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

const i18n = createI18n({
  legacy: false,
  locale: 'pt-BR',
  fallbackLocale: {
    'pt-BR': ['pt', 'en'],
    'zh-Hant-TW': ['zh-Hant', 'zh', 'en'],
    'es-419': ['es', 'en'],
    default: ['en'],
  },
  messages: {
    en: { /* ... */ },
    pt: { /* ... */ },
    'pt-BR': { /* ... */ },
  },
})
fallbackLocale nesnesi, farklı yerel ayarlar için farklı zincirler tanımlamanızı sağlar. pt-BR kullanıcısı önce pt'ye, ardından en'e geri dönerken zh-Hant-TW kullanıcısı önce zh-Hant'a, sonra zh'ye ve en'e geri döner.

Yaygın sorunlar

Eski mod ile Composition API modunu karıştırmak

useI18n() işlevini legacy: true (varsayılan) ayarıyla kullanmak hatalara neden olur. Composition API kullanıyorsanız createI18n() içinde legacy: false ayarını belirleyin veya şablonlarda Options API ile $t() kullanmaya devam edin. Aynı uygulamada iki modu karıştırmayın.

Çevrilmiş dizeler için v-html kullanmak

Kullanıcı girdisinden gelen herhangi bir yerleştirme değeri varsa HTML içeren çevirileri v-html ile işlemek XSS riski oluşturur. Yerleşik HTML veya Vue bileşenleri içeren çevirilerde &lt;i18n-t&gt; bileşenini kullanın; bu bileşen varsayılan olarak güvenlidir ve tepkisel bileşen yerleştirmeyi destekler.

Bölgesel kullanıcıların üst yerel ayar yerine İngilizce görmesi

vue-i18n'in fallbackLocale özelliği yerel ayar başına zincir değil, düz bir listedir. pt-BR, pt-PT'yi tamamen atlayarak listedeki yerel ayara (genellikle 'en') geri döner. Derin birleştirmeyle doğru bölgesel geri dönüşü eklemek için vue-i18n-locale-chain kullanın.

i18n Agent'ı şimdi deneyin

Çeviri dosyanızı buraya bırakın

JSON, YAML, PO, XML, CSV, Markdown, Properties

veya göz atmak için tıklayın

Hedef diller

Kayıt gerekmezAnında fiyat tahmini

Vue i18n hakkında sık sorulan sorular