Skip to main content

Vue i18n: Komplett oppsett for internasjonalisering med vue-i18n

Fra installasjon til produksjon: Konfigurer vue-i18n med Composition API, håndter flertallsformer med CLDR-regler, bruk komponentinterpolering og legg til smarte reservekjeder for språk.

1

Installer vue-i18n

vue-i18n er det offisielle tillegget for internasjonalisering av Vue.js. Det tilbyr reaktive oversettelser, flertallshåndtering i ICU-stil, komponentinterpolering, formatering av dato, klokkeslett og tall samt støtte for både Options API og Composition API.

Terminal
npm install vue-i18n@9
2

Konfigurer vue-i18n

Opprett en i18n-forekomst med createI18n(), og registrer den som et Vue-tillegg. Definer språkmeldingene, angi standardspråket og konfigurer reservespråket. vue-i18n støtter både gammel modus (Options API) og komposisjonsmodus (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')
Hvis du ser feilen 'Not available in legacy mode', blander du i18n-kall fra Composition API (useI18n()) med konfigurasjon for gammel modus. Angi legacy: false i createI18n() for å bruke Composition API-modus, eller bruk syntaksen $t() fra Options API konsekvent.
3

Bruk oversettelser i maler

vue-i18n tilbyr funksjonen $t() i maler (Options API) og funksjonen t() fra useI18n() (Composition API). Begge tar imot oversettelsesnøkkelen og valgfrie navngitte parametere eller listeparametere for 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

Håndter flertallsformer

vue-i18n støtter flertallsformer gjennom former adskilt av loddrette streker og funksjonen $tc() (gammel modus) eller t() med en antallsparameter (Composition API). Definer flertallsformene i språkmeldingene ved hjelp av loddrett strek: '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>
Flertallssyntaksen med loddrette streker støtter bare kardinale flertallsformer med opptil tre former (null | én | annet). For språk med komplekse CLDR-regler for flertall (arabisk, russisk og polsk) bruker du ICU MessageFormat-syntaks eller modifikatoren @.plural med eksplisitte tilordninger til CLDR-kategorier.
5

Legg til reservekjeder for språk

Den innebygde fallbackLocale-funksjonen i vue-i18n støtter bare en flat liste over reservespråk, ikke egne kjeder for hvert språk. En pt-BR-bruker med en manglende nøkkel får engelsk i stedet for pt-PT. vue-i18n-locale-chain legger til konfigurerbare kjeder med dypsammenslåing, slik at regionale brukere alltid ser den nærmeste tilgjengelige oversettelsen.

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 slår sammen meldinger rekursivt ved innlasting. Det sammenslåtte meldingssettet mellomlagres av reaktivitetssystemet i vue-i18n, slik at reserveoppslag ikke medfører noen ytelseskostnad under kjøring.
6

Automatiser oversettelser

Når vue-i18n er konfigurert, kan du oversette JSON-språkfilene med AI. Be AI-assistenten om å oversette kildefilen fra utviklingsmiljøet, eller integrer oversettelse i CI/CD-forløpet for helautomatisk 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

Konfigurasjon av reservekjeder for språk

Konfigurer en reservekjede for hvert språk, slik at regionale brukere ser den nærmeste tilgjengelige oversettelsen i stedet for å gå rett til engelsk. vue-i18n støtter objektbasert fallbackLocale for å definere kjeder 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 fallbackLocale-objektet kan du definere forskjellige kjeder for forskjellige språk. En pt-BR-bruker faller tilbake til pt og deretter en, mens en zh-Hant-TW-bruker faller tilbake til zh-Hant, zh og deretter en.

Vanlige fallgruver

Blanding av gammel modus og Composition API-modus

Bruk av useI18n() med legacy: true (standardinnstillingen) forårsaker feil. Angi legacy: false i createI18n() hvis du bruker Composition API, eller hold deg til $t() i maler med Options API. Ikke bland begge modusene i samme program.

Bruk av v-html for oversatte strenger

Bruk av v-html til å gjengi oversettelser som inneholder HTML, medfører XSS-risiko hvis noen interpolerte verdier kommer fra brukerinndata. Bruk komponenten &lt;i18n-t&gt; for oversettelser med innebygd HTML eller Vue-komponenter – den er trygg som standard og støtter reaktiv innbygging av komponenter.

Regionale brukere ser engelsk i stedet for det overordnede språket

fallbackLocale i vue-i18n er en flat liste, ikke en egen kjede for hvert språk. pt-BR går videre til det som står i listen (vanligvis 'en'), og hopper helt over pt-PT. Bruk vue-i18n-locale-chain for å legge til riktig regional reservefunksjon med dypsammenslåing.

Prøv i18n Agent nå

Slipp oversettelsesfilen din her

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

eller klikk for å bla gjennom

Målspråk

Ingen registrering krevesUmiddelbart estimat

Vanlige spørsmål om Vue i18n