$npx -y skills add skilld-dev/vue-ecosystem-skills --skill vue-i18n-skilldInternationalization plugin for Vue.js. ALWAYS use when writing code importing \"vue-i18n\". Consult for debugging, best practices, or modifying vue-i18n, vue i18n.
| 1 | # intlify/vue-i18n `vue-i18n@11.4.0` |
| 2 | **Tags:** rc: 9.0.0-rc.9, alpha: 9.2.0-alpha.9, legacy: 8.28.2 |
| 3 | |
| 4 | **References:** [Docs](./references/docs/_INDEX.md) |
| 5 | ## API Changes |
| 6 | |
| 7 | This section documents version-specific API changes — prioritize recent major/minor releases. |
| 8 | |
| 9 | - DEPRECATED: Legacy API mode — deprecated in v11 for Composition API preference; scheduled for removal in v12 [source](./references/releases/v11.0.0.md#deprecate-legacy-api-mode) |
| 10 | |
| 11 | - DEPRECATED: Custom Directive `v-t` — deprecated in v11 due to limited optimization benefits in Vue 3; scheduled for removal in v12 [source](./references/releases/v11.0.0.md#deprecate-custom-directive-v-t) |
| 12 | |
| 13 | - BREAKING: `tc` and `$tc` — dropped in v11 for Legacy API mode; use pluralization support in `t` and `$t` instead [source](./references/releases/v11.0.0.md#drop-tc-and-tc-for-legacy-api-mode) |
| 14 | |
| 15 | - NEW: Vue 3 Vapor Mode — added compatibility for Vue 3 vapor mode in v11.2.0 [source](./references/releases/v11.2.0.md#features) |
| 16 | |
| 17 | - BREAKING: JIT Compilation — enabled by default in v10 to solve CSP issues and support dynamic resources [source](./references/docs/guide/migration/breaking10.md#default-enable-for-jit-compilation) |
| 18 | |
| 19 | - BREAKING: `$t` and `t` Signatures — Legacy API mode signatures changed in v10 to match Composition API mode; positional locale args now require options object [source](./references/docs/guide/migration/breaking10.md#change-t-and-t-overloaded-signature-for-legacy-api-mode) |
| 20 | |
| 21 | - NEW: Generated Locale Types — v10 adds support for extending locale types via `GeneratedTypeConfig` for better TypeScript inference [source](./references/releases/v10.0.0.md#support-for-generated-locale-types) |
| 22 | |
| 23 | - BREAKING: Modulo `%` Syntax — named interpolation using modulo syntax dropped in v10; use standard `{}` interpolation [source](./references/docs/guide/migration/breaking10.md#drop-modulo-syntax) |
| 24 | |
| 25 | - BREAKING: `vue-i18n-bridge` — dropped in v10 following Vue 2 EOL [source](./references/docs/guide/migration/breaking10.md#drop-vue-i18n-bridge) |
| 26 | |
| 27 | - BREAKING: `allowComposition` Option — dropped in v10; was previously used for Legacy to Composition API migration on v9 [source](./references/docs/guide/migration/breaking10.md#drop-allowcomposition-option) |
| 28 | |
| 29 | **Also changed:** `petite-vue-i18n` GA v10 · Configurable `$i18n` type new v11.1.0 · `mode` property deprecated v11 · `tm` accepts `DefineLocaleMessage` key type v11.0.0 · Part options support `$n` & `$d` new v11.1.4 |
| 30 | |
| 31 | ## Best Practices |
| 32 | |
| 33 | - Prefer Composition API mode (`legacy: false`) for all new projects — Legacy API mode is deprecated in v11 and will be removed in v12 [source](./references/docs/guide/migration/breaking11.md#deprecate-legacy-api-mode) |
| 34 | |
| 35 | - Use `t()` function or `<i18n-t>` component over the `v-t` directive — the directive is deprecated in v11 and lacks IDE support for key completion [source](./references/docs/guide/migration/breaking11.md#deprecate-custom-directive-v-t) |
| 36 | |
| 37 | - Define global resource schemas using `DefineLocaleMessage`, `DefineDateTimeFormat`, and `DefineNumberFormat` interfaces — enables automatic type inference and key completion in `useI18n` without passing type parameters [source](./references/docs/guide/advanced/typescript.md#global-resource-schema-type-definition) |
| 38 | |
| 39 | - Use `rt()` (Resolve Translation) when processing locale messages retrieved via `tm()` — ensures proper resolution of nested structures and pluralization for programmatically accessed messages |
| 40 | |
| 41 | - Enable `escapeParameter: true` when using `v-html` with translations containing user input — prevents XSS by escaping interpolation parameters and neutralizing dangerous HTML attributes |
| 42 | |
| 43 | - Explicitly configure `__VUE_I18N_FULL_INSTALL__` and `__VUE_I18N_LEGACY_API__` feature flags — setting these to `false` in bundler configuration enables better tree-shaking and reduces bundle size [source](./references/docs/guide/advanced/optimization.md#reduce-bundle-size-with-tree-shaking) |
| 44 | |
| 45 | - Pre-compile locale messages using `@intlify/unplugin-vue-i18n` — improves performance by using AST/Functions and ensures CSP compliance by avoiding `eval` during runtime compilation [source](./references/docs/guide/advanced/optimization.md#performance) |
| 46 | |
| 47 | - Implement lazy loading for locale messages using dynamic `import()` and `setLocaleMessage()` — reduces initial bundle size by loading language resources only when needed (e.g., in router guards) [source](./references/docs/guide/advanced/lazy.md#lazy-loading) |
| 48 | |
| 49 | - Synchronize the `html` `lang` attribute and `Accept-Language` headers when switching locales — ensures accessibility (screen readers) and consistent language handling for server-side requests [source](./references/docs/guide/advanced/lazy.md#lazy-loading) |