vue-i18n-skilld

vue-i18n 11.4.12 (Vue 3)

Internationalization plugin for Vue.js.

• Peer dependency: vue ^3.0.0 (package.json:44). No Vue 2 support; use vue-i18n v8 for Vue 2.
• Node engines: >= 22 (package.json:47).
• For Nuxt 3, use @nuxtjs/i18n instead of installing this directly (https://vue-i18n.intlify.dev/guide/integrations/nuxt3.html).

Core rules

1. Default to Composition API mode. Pass legacy: false to createI18n and use useI18n(). Legacy API mode (legacy: true, the default) is deprecated in v11 and removed in v12 (dist/vue-i18n.d.ts:1728).
2. Do not use the v-t directive in new code. Deprecated in v11, removed in v12 (dist/vue-i18n.d.ts:2138). Use t(), $t, or the <i18n-t> component.
3. tc and $tc no longer exist. Dropped in v11; t/$t handle pluralization via the plural option (verified: no tc export in dist/vue-i18n.d.ts).
4. Interpolation uses {name} syntax. The v8 modulo % syntax was dropped in v10 (https://vue-i18n.intlify.dev/guide/migration/breaking10.html#drop-modulo-syntax).
5. Messages are compiled at runtime (JIT) by default since v10. For CSP-strict environments or best performance, pre-compile with @intlify/unplugin-vue-i18n (https://vue-i18n.intlify.dev/guide/advanced/optimization.html).
6. Never interpolate user input into messages rendered with v-html without escapeParameter: true; translate content, do not concatenate HTML.

Setup

// i18n.js
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  legacy: false, // Composition API mode
  locale: 'ja',
  fallbackLocale: 'en',
  messages: {
    en: { message: { hello: 'hello world' } },
    ja: { message: { hello: 'こんにちは、世界' } }
  }
})

export default i18n

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

createApp(App).use(i18n).mount('#app')

app.use(i18n) installs the $t/$d/$n/$rt global properties (when globalInjection: true, the default), enables useI18n, and globally registers i18n-t, i18n-d, i18n-n (when globalInstall: true, the default; dist/vue-i18n.d.ts:1810-1822).