Skip to main content

Vue i18n: complete internationalisatieconfiguratie met vue-i18n

Van installatie tot productie: configureer vue-i18n met de Composition API, verwerk meervoudsvormen met CLDR-regels, gebruik componentinterpolatie en voeg slimme terugvalketens toe.

1

vue-i18n installeren

vue-i18n is de officiële internationalisatieplug-in voor Vue.js. De plug-in biedt reactieve vertalingen, meervoudsvormen in ICU-stijl, componentinterpolatie, datum-, tijd- en getalnotatie en ondersteuning voor zowel de Options API als de Composition API.

Terminal
npm install vue-i18n@9
2

vue-i18n configureren

Maak met createI18n() een i18n-instantie en registreer deze als Vue-plug-in. Definieer je localeberichten, stel de standaardlocale in en configureer de terugvallocale. vue-i18n ondersteunt zowel de verouderde modus (Options API) als de compositiemodus (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')
Als je fouten met 'Not available in legacy mode' ziet, combineer je i18n-aanroepen uit de Composition API (useI18n()) met een configuratie voor de verouderde modus. Stel legacy: false in createI18n() in voor de Composition API of gebruik consequent de $t()-syntaxis van de Options API.
3

Vertalingen in sjablonen gebruiken

vue-i18n biedt de functie $t() in sjablonen (Options API) en de functie t() van useI18n() (Composition API). Beide accepteren de vertaalsleutel en optionele benoemde parameters of lijstparameters voor interpolatie.

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

Meervoudsvormen verwerken

vue-i18n ondersteunt meervoudsvormen via door sluistekens gescheiden vormen en de functie $tc() (verouderd) of via t() met een aantalparameter (Composition API). Definieer meervoudsvormen in je localeberichten met het sluisteken: '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>
De door sluistekens gescheiden meervoudssyntaxis ondersteunt alleen hoofdtelwoordmeervouden met maximaal drie vormen (nul | één | overig). Gebruik voor talen met complexe CLDR-meervoudsregels (Arabisch, Russisch, Pools) de ICU MessageFormat-syntaxis of de modifier @.plural met expliciete koppelingen aan CLDR-categorieën.
5

Locale-fallbackketens toevoegen

De ingebouwde fallbackLocale van vue-i18n ondersteunt alleen een platte lijst met terugvallocales, geen ketens per locale. Een gebruiker met pt-BR en een ontbrekende sleutel valt terug op Engels in plaats van pt-PT. vue-i18n-locale-chain voegt configureerbare ketens met diepe samenvoeging toe, zodat regionale gebruikers altijd de dichtstbijzijnde beschikbare vertaling zien.

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 voegt berichten tijdens het laden diep samen. Het reactiviteitssysteem van vue-i18n bewaart de samengevoegde berichtenset in de cache, zodat terugvalzoekacties tijdens runtime geen prestaties kosten.
6

Vertalingen automatiseren

Nu vue-i18n is geconfigureerd, kun je de JSON-localebestanden met AI vertalen. Vraag je AI-assistent vanuit je IDE om het bronbestand te vertalen of integreer vertaling in je CI/CD-pipeline voor volledig geautomatiseerde lokalisatie.

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

Terugvalketens voor locales configureren

Configureer terugvalketens per locale, zodat regionale gebruikers de dichtstbijzijnde beschikbare vertaling zien in plaats van rechtstreeks naar Engels over te schakelen. vue-i18n ondersteunt fallbackLocale in objectvorm om per locale ketens te definiëren.

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': { /* ... */ },
  },
})
Met het object fallbackLocale kun je verschillende ketens voor verschillende locales definiëren. Een gebruiker met pt-BR valt terug op pt en daarna en, terwijl zh-Hant-TW terugvalt op zh-Hant, zh en vervolgens en.

Veelvoorkomende valkuilen

De verouderde modus en Composition API-modus combineren

useI18n() gebruiken met legacy: true (de standaardinstelling) veroorzaakt fouten. Stel legacy: false in createI18n() in als je de Composition API gebruikt of blijf bij $t() in sjablonen met de Options API. Combineer beide modi niet in dezelfde toepassing.

v-html voor vertaalde tekenreeksen gebruiken

v-html gebruiken om vertalingen met HTML weer te geven vormt een XSS-risico als interpolatiewaarden uit gebruikersinvoer komen. Gebruik voor vertalingen met ingesloten HTML of Vue-componenten de component &lt;i18n-t&gt;. Deze is standaard veilig en ondersteunt reactieve componentinsluiting.

Regionale gebruikers zien Engels in plaats van de bovenliggende locale

De fallbackLocale van vue-i18n is een platte lijst, geen keten per locale. pt-BR valt terug op wat er in de lijst staat (meestal 'en') en slaat pt-PT volledig over. Gebruik vue-i18n-locale-chain om correcte regionale terugval met diepe samenvoeging toe te voegen.

Probeer i18n Agent nu

Zet je vertaalbestand hier neer

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

of klik om een bestand te selecteren

Doeltalen

Geen registratie nodigDirecte prijsindicatie

Veelgestelde vragen over Vue i18n