Skip to main content

Vue i18n: Kumpletong Internationalization Setup gamit ang vue-i18n

Mula installation hanggang production: i-configure ang vue-i18n gamit ang Composition API, pangasiwaan ang plural gamit ang CLDR rule, gamitin ang component interpolation, at magdagdag ng smart locale fallback chain.

1

I-install ang vue-i18n

Ang vue-i18n ang opisyal na internationalization plugin para sa Vue.js. Nagbibigay ito ng reactive translation, ICU-style pluralization, component interpolation, datetime at number formatting, at suporta para sa Options API at Composition API.

Terminal
npm install vue-i18n@9
2

I-configure ang vue-i18n

Gumawa ng i18n instance gamit ang createI18n() at irehistro ito bilang Vue plugin. Idefine ang inyong mga locale message, itakda ang default na locale, at i-configure ang fallback locale. Sinusuportahan ng vue-i18n ang parehong legacy (Options API) at composition (Composition API) mode.

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')
Kung makakita kayo ng error na 'Not available in legacy mode', naghahalo kayo ng Composition API i18n call (useI18n()) at legacy mode configuration. Itakda ang legacy: false sa createI18n() para gumamit ng Composition API mode, o gamitin nang tuluy-tuloy ang Options API $t() syntax.
3

Gamitin ang Mga Pagsasalin sa Template

Nagbibigay ang vue-i18n ng $t() function sa template (Options API) at ng t() function mula sa useI18n() (Composition API). Pareho nitong tinatanggap ang translation key at mga opsyonal na named/list parameter para sa interpolation.

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

Pangasiwaan ang Pluralization

Sinusuportahan ng vue-i18n ang pluralization sa pamamagitan ng mga anyong pinaghiwalay ng pipe at ng $tc() function (legacy) o t() na may count parameter (Composition API). Tukuyin ang mga plural form sa inyong locale message gamit ang pipe separator: '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>
Ang pipe-separated na plural syntax ay sumusuporta lamang sa cardinal plural na hanggang tatlong anyo (zero | one | other). Para sa mga wikang may kumplikadong CLDR plural rule (Arabic, Russian, Polish), gamitin ang ICU MessageFormat syntax o ang @.plural modifier na may tahasang CLDR category mapping.
5

Magdagdag ng Locale Fallback Chain

Ang built-in na fallbackLocale ng vue-i18n ay sumusuporta lamang sa flat na listahan ng fallback locale, hindi sa per-locale chain. Ang pt-BR na user na may nawawalang key ay nagfa-fallback sa English imbes na pt-PT. Nagdaragdag ang vue-i18n-locale-chain ng mga nako-configure na deep-merge chain para laging makita ng mga regional user ang pinakamalapit na available na pagsasalin.

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" -->
Nagde-deep-merge ang vue-i18n-locale-chain ng mga message sa oras ng pag-load. Kino-cache ng reactivity system ng vue-i18n ang na-merge na message set, kaya walang runtime performance penalty para sa mga fallback lookup.
6

I-automate ang Mga Pagsasalin

Kapag naka-configure na ang vue-i18n, isalin ang inyong locale JSON file gamit ang AI. Mula sa inyong IDE, hilingin sa inyong AI assistant na isalin ang source file, o i-integrate ang pagsasalin sa inyong CI/CD pipeline para sa ganap na automated localization.

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

Configuration ng Locale Fallback Chain

I-configure ang per-locale fallback chain para makita ng mga regional user ang pinakamalapit na available na pagsasalin sa halip na dumiretso sa English. Sinusuportahan ng vue-i18n ang object-style fallbackLocale para magtakda ng chain kada 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': { /* ... */ },
  },
})
Pinahihintulutan kayo ng fallbackLocale object na magdefine ng magkakaibang chain para sa magkakaibang locale. Ang pt-BR na user ay magfa-fallback sa pt pagkatapos en, habang ang zh-Hant-TW na user ay magfa-fallback sa zh-Hant, zh, pagkatapos en.

Mga Karaniwang Pagkakamali

Paghahalo ng Legacy at Composition API Mode

Nagkakaroon ng error kapag ginamit ang useI18n() kasabay ng legacy: true (ang default). Itakda ang legacy: false sa createI18n() kung gumagamit kayo ng Composition API, o manatili sa $t() sa template kung gumagamit ng Options API. Huwag paghaluin ang dalawang mode sa iisang application.

Paggamit ng v-html para sa Mga Isinaling String

Ang paggamit ng v-html para i-render ang mga pagsasaling naglalaman ng HTML ay XSS risk kung alinman sa interpolation value ay galing sa user input. Gamitin ang &lt;i18n-t&gt; component para sa mga pagsasaling may naka-embed na HTML o Vue component — ligtas ito bilang default at sumusuporta sa reactive na pag-embed ng component.

Nakakakita ang Mga Rehiyonal na User ng English imbes na Parent Locale

Flat na listahan ang fallbackLocale ng vue-i18n, hindi per-locale chain. Nagfa-fallback ang pt-BR sa kung ano man ang nasa listahan (karaniwan ay 'en'), at tuluyang nilalaktawan ang pt-PT. Gamitin ang vue-i18n-locale-chain para magdagdag ng tamang regional fallback na may deep-merge.

Subukan ang i18n Agent Ngayon

I-drop dito ang inyong translation file

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

o i-click para mag-browse

Mga target language

Hindi kailangan ang signupInstant na estimate

FAQ sa Vue i18n