Skip to main content

Vue i18n: cjelovito postavljanje internacionalizacije uz vue-i18n

Od instalacije do produkcije: postavite vue-i18n uz Composition API, obradite množinu pravilima CLDR, rabite interpolaciju komponenti i dodajte pametne lance zamjenskih lokalnih postavki.

1

Instaliranje paketa vue-i18n

vue-i18n službeni je dodatak za internacionalizaciju Vue.js-a. Nudi reaktivne prijevode, množinu u stilu ICU-a, interpolaciju komponenti, oblikovanje datuma i brojeva te podršku za Options API i Composition API.

Terminal
npm install vue-i18n@9
2

Postavljanje paketa vue-i18n

Izradite i18n instancu funkcijom createI18n() i registrirajte je kao Vueov dodatak. Definirajte poruke lokalnih postavki te postavite zadane i zamjenske postavke. vue-i18n podržava naslijeđeni način rada (Options API) i način Composition API.

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')
Ako vidite pogrešku 'Not available in legacy mode', kombinirate i18n pozive Composition API-ja (useI18n()) s konfiguracijom naslijeđenog načina rada. U createI18n() postavite legacy: false za Composition API ili dosljedno rabite sintaksu $t() iz Options API-ja.
3

Uporaba prijevoda u predlošcima

vue-i18n nudi funkciju $t() u predlošcima (Options API) i funkciju t() iz useI18n() (Composition API). Obje prihvaćaju ključ prijevoda te neobavezne imenovane parametre ili parametre popisa za interpolaciju.

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

Obradite množinu

vue-i18n podržava množinu oblicima odvojenima okomitom crtom te funkcijom $tc() (naslijeđeni način) ili t() s parametrom broja (Composition API). Množinske oblike u porukama definirajte okomitom crtom: 'no items | one item | {count} items'.

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>
Sintaksa množine s okomitom crtom podržava samo glavne brojeve s najviše tri oblika (zero | one | other). Za jezike sa složenim pravilima množine CLDR, poput arapskoga, ruskoga i poljskoga, rabite sintaksu ICU MessageFormat ili modifikator @.plural s izričitim mapiranjem kategorija CLDR.
5

Dodavanje lanaca zamjenskih lokalnih postavki

Ugrađeni fallbackLocale u vue-i18n podržava samo ravan popis zamjenskih lokalnih postavki, a ne zasebne lance. Korisnik s postavkom pt-BR kojem nedostaje ključ prelazi na engleski umjesto na pt-PT. vue-i18n-locale-chain dodaje prilagodljive lance s dubinskim objedinjavanjem kako bi regionalni korisnici uvijek vidjeli najbliži dostupan prijevod.

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 dubinski objedinjuje poruke tijekom učitavanja. Reaktivni sustav vue-i18n pohranjuje objedinjeni skup poruka u predmemoriju, pa zamjenska traženja ne stvaraju dodatno opterećenje tijekom izvođenja.
6

Automatiziranje prijevoda

Nakon što postavite vue-i18n, prevedite JSON datoteke lokalnih postavki uz pomoć AI-ja. U IDE-u zatražite od AI pomoćnika prijevod izvorne datoteke ili integrirajte prevođenje u CI/CD pipeline radi potpuno automatizirane lokalizacije.

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

Konfiguriranje zamjenskih lanaca lokalnih postavki

Konfigurirajte zaseban zamjenski lanac za svaku lokalnu postavku kako bi regionalni korisnici vidjeli najbliži dostupan prijevod umjesto da odmah prijeđu na engleski. vue-i18n podržava fallbackLocale u obliku objekta za definiranje takvih lanaca.

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': { /* ... */ },
  },
})
Objekt fallbackLocale omogućuje Vam definiranje različitih lanaca za različite lokalne postavke. Korisnik s pt-BR prelazi na pt pa en, dok korisnik s zh-Hant-TW prelazi na zh-Hant, zatim zh pa en.

Uobičajene zamke

Kombiniranje naslijeđenog načina rada i Composition API-ja

Uporaba useI18n() uz legacy: true (zadano) uzrokuje pogreške. Ako rabite Composition API, u createI18n() postavite legacy: false; u suprotnom se u predlošcima držite funkcije $t() iz Options API-ja. Nemojte kombinirati oba načina u istoj aplikaciji.

Uporaba v-html za prevedene nizove

Uporaba v-html za prikaz prijevoda koji sadržavaju HTML predstavlja rizik od XSS-a ako interpolirane vrijednosti potječu iz korisničkog unosa. Za prijevode s ugrađenim HTML-om ili Vue komponentama rabite &lt;i18n-t&gt; — prema zadanim je postavkama sigurna i podržava reaktivno ugrađivanje komponenti.

Regionalni korisnici vide engleski umjesto nadređenih lokalnih postavki

fallbackLocale u vue-i18n ravan je popis, a ne zaseban lanac za svaku lokalnu postavku. pt-BR prelazi na vrijednost s popisa, obično 'en', i potpuno preskače pt-PT. Paketom vue-i18n-locale-chain dodajte ispravnu regionalnu zamjenu s dubinskim objedinjavanjem.

Isprobajte i18n Agent odmah

Povucite datoteku za prijevod ovdje

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

ili kliknite za odabir

Ciljni jezici

Registracija nije potrebnaProcjena odmah

Česta pitanja o Vueovu i18n sustavu