Skip to main content

Vue i18n: komplett internationaliseringskonfiguration med vue-i18n

Från installation till produktion: konfigurera vue-i18n med Composition API, hantera pluralformer med CLDR-regler, använd komponentinterpolering och lägg till smarta reservspråkskedjor.

1

Installera vue-i18n

vue-i18n är det officiella internationaliseringstillägget för Vue.js. Det ger reaktiva översättningar, pluralhantering i ICU-stil, komponentinterpolering, datum-, tids- och talformatering samt stöd för både Options API och Composition API.

Terminal
npm install vue-i18n@9
2

Konfigurera vue-i18n

Skapa en i18n-instans med createI18n() och registrera den som ett Vue-tillägg. Definiera språkmeddelandena, ange standardspråket och konfigurera reservspråket. vue-i18n stöder både äldre läge (Options API) och Composition API-läge.

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')
Om du ser felet 'Not available in legacy mode' blandar du i18n-anrop från Composition API (useI18n()) med konfiguration för äldre läge. Ange legacy: false i createI18n() för att använda Composition API-läget eller använd konsekvent syntaxen $t() från Options API.
3

Använd översättningar i mallar

vue-i18n tillhandahåller funktionen $t() i mallar (Options API) och funktionen t() från useI18n() (Composition API). Båda tar emot översättningsnyckeln och valfria namngivna parametrar eller listparametrar för interpolering.

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

Hantera pluralformer

vue-i18n stöder pluralformer genom lodstrecksavgränsade former och funktionen $tc() (äldre läge) eller t() med en antalsparameter (Composition API). Definiera pluralformer i språkmeddelandena med lodstrecksavgränsaren: '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>
Den lodstrecksavgränsade pluralsyntaxen stöder bara kardinala pluralformer med upp till tre former (zero | one | other). För språk med komplexa CLDR-pluralregler (arabiska, ryska och polska) använder du ICU MessageFormat-syntax eller modifieraren @.plural med uttryckliga mappningar av CLDR-kategorier.
5

Lägg till reservspråkskedjor

vue-i18n:s inbyggda fallbackLocale stöder bara en platt lista med reservspråk, inte separata kedjor för varje språk. En pt-BR-användare som saknar en nyckel får engelska i stället för pt-PT. vue-i18n-locale-chain lägger till konfigurerbara kedjor med djupsammanfogning, så att regionala användare alltid ser den närmast tillgängliga översättningen.

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 djupsammanfogar meddelanden vid inläsning. Den sammanfogade meddelandeuppsättningen cachelagras av vue-i18n:s reaktivitetssystem, så reservuppslagningar påverkar inte prestandan under körning.
6

Automatisera översättningar

När vue-i18n är konfigurerat kan du översätta JSON-språkfilerna med AI. Be din AI-assistent att översätta källfilen från din IDE eller integrera översättningen i CI/CD-processen för helt automatiserad lokalisering.

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

Konfigurera reservspråkskedjor

Konfigurera separata reservspråkskedjor för varje språk, så att regionala användare ser den närmast tillgängliga översättningen i stället för att gå direkt till engelska. vue-i18n stöder fallbackLocale i objektform för att definiera kedjor per språk.

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': { /* ... */ },
  },
})
Med objektet fallbackLocale kan du definiera olika kedjor för olika språk. En pt-BR-användare går vidare till pt och sedan en, medan en zh-Hant-TW-användare går vidare till zh-Hant, zh och sedan en.

Vanliga fallgropar

Äldre läge och Composition API-läge blandas

Att använda useI18n() med legacy: true (standardvärdet) orsakar fel. Ange legacy: false i createI18n() om du använder Composition API eller håll dig till $t() i mallar med Options API. Blanda inte båda lägena i samma applikation.

v-html används för översatta strängar

Att använda v-html för att rendera översättningar som innehåller HTML medför en XSS-risk om något interpoleringsvärde kommer från användarinmatning. Använd komponenten &lt;i18n-t&gt; för översättningar med inbäddad HTML eller Vue-komponenter. Den är säker som standard och stöder reaktiv inbäddning av komponenter.

Regionala användare ser engelska i stället för det överordnade språket

vue-i18n:s fallbackLocale är en platt lista, inte en kedja per språk. pt-BR går vidare till det som finns i listan (vanligen 'en') och hoppar helt över pt-PT. Använd vue-i18n-locale-chain för att lägga till korrekt regional reservhantering med djupsammanfogning.

Prova i18n Agent nu

Släpp din översättningsfil här

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

eller klicka för att välja en fil

Målspråk

Ingen registrering krävsPrisuppskattning direkt

Vanliga frågor om Vue i18n