Skip to main content

Vue i18n: Kompletní nastavení internacionalizace s vue-i18n

Od instalace po produkci: nakonfigurujte vue-i18n s Composition API, řešte plurály podle pravidel CLDR, použijte interpolaci komponent a přidejte inteligentní locale fallback řetězce.

1

Nainstalujte vue-i18n

vue-i18n je oficiální plugin pro internacionalizaci Vue.js. Poskytuje reaktivní překlady, pluralizaci ve stylu ICU, interpolaci komponent, formátování data a čísla a podporu jak Options API, tak Composition API.

Terminal
npm install vue-i18n@9
2

Nakonfigurujte vue-i18n

Vytvořte instanci i18n pomocí createI18n() a zaregistrujte ji jako Vue plugin. Definujte locale messages, nastavte výchozí locale a nakonfigurujte fallback locale. vue-i18n podporuje jak legacy (Options API), tak composition (Composition API) režim.

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')
Pokud se zobrazují chyby „Not available in legacy mode“, mícháte i18n volání pro Composition API (useI18n()) s konfigurací pro legacy režim. Nastavte legacy: false v createI18n(), pokud chcete používat Composition API režim, nebo konzistentně používejte syntaxi Options API s $t().
3

Používejte překlady v šablonách

vue-i18n poskytuje funkci $t() v šablonách (Options API) a funkci t() z useI18n() (Composition API). Obě přijímají překladový klíč a volitelné pojmenované nebo seznamové parametry pro interpolaci.

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

Zpracování pluralizace

vue-i18n podporuje pluralizaci pomocí tvarů oddělených svislítkem a funkce $tc() (legacy) nebo t() s parametrem count (Composition API). Pluralizační tvary definujte v locale messages pomocí oddělovače svislítko: '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>
Pluralizační syntaxe oddělená svislítkem podporuje pouze kardinální plurály až se třemi tvary (zero | one | other). Pro jazyky se složitými pravidly CLDR (arabština, ruština, polština) použijte syntaxi ICU MessageFormat nebo modifikátor @.plural s explicitním mapováním kategorií CLDR.
5

Přidat locale fallback řetězce

Vestavěné fallbackLocale ve vue-i18n podporuje pouze plochý seznam fallback locales, nikoli řetězce pro jednotlivá locale. Uživatel pt-BR při chybějícím klíči spadne na angličtinu místo pt-PT. vue-i18n-locale-chain přidává konfigurovatelné řetězce s hloubkovým slučováním, takže regionální uživatelé vždy uvidí nejbližší dostupný překlad.

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 hloubkově slučuje zprávy při načítání. Sloučená sada zpráv je ukládána do cache reaktivním systémem vue-i18n, takže fallback vyhledávání nepřináší žádnou runtime penalizaci výkonu.
6

Automatizovat překlady

S nakonfigurovaným vue-i18n přeložte své JSON soubory locale pomocí AI. Z IDE požádejte AI asistenta o překlad zdrojového souboru nebo integrujte překlady do Vašeho CI/CD pipeline pro plně automatizovanou lokalizaci.

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

Konfigurace locale fallback řetězce

Nakonfigurujte fallback řetězce pro jednotlivá locale, aby regionální uživatelé viděli nejbližší dostupný překlad místo skoku rovnou na angličtinu. vue-i18n podporuje objektový styl fallbackLocale pro definování řetězců pro jednotlivá locale.

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 umožňuje definovat různé řetězce pro různá locale. Uživatel pt-BR přejde na pt a poté en, zatímco uživatel zh-Hant-TW přejde na zh-Hant, zh a poté en.

Běžná úskalí

Míchání režimů Legacy a Composition API

Použití useI18n() s legacy: true (výchozí) způsobuje chyby. Pokud používáte Composition API, nastavte legacy: false v createI18n(), nebo se držte $t() v šablonách s Options API. Nemíchejte oba režimy v jedné aplikaci.

Používání v-html pro přeložené řetězce

Používání v-html k renderování překladů, které obsahují HTML, představuje riziko XSS, pokud některé interpolované hodnoty pocházejí ze vstupu uživatele. Pro překlady s vloženým HTML nebo Vue komponentami použijte komponentu &lt;i18n-t&gt; — ve výchozím nastavení je bezpečná a podporuje reaktivní vkládání komponent.

Regionální uživatelé vidí angličtinu místo nadřazeného locale

fallbackLocale ve vue-i18n je plochý seznam, nikoli řetězec pro jednotlivá locale. pt-BR spadne na to, co je v seznamu (obvykle 'en'), a pt-PT úplně přeskočí. Použijte vue-i18n-locale-chain pro správný regionální fallback s hloubkovým slučováním.

Vyzkoušejte i18n Agent nyní

Sem přetáhněte svůj překladový soubor

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

nebo klikněte a vyberte soubor

Cílové jazyky

Bez registraceOkamžitý odhad

FAQ k i18n ve Vue