web-i18n-vue-i18n_skill

Overview

This skill provides a concise, type-safe pattern set for implementing vue-i18n with the Vue 3 Composition API. It focuses on modern, Composition API-first configuration, type-safe locale constants, and component-level useI18n patterns that avoid common reactivity bugs. The guidance emphasizes required project conventions and safe async locale updates.

How this skill works

It shows how to configure createI18n with legacy: false to enable Composition API mode, register the plugin at app root, and organize locales and types. Components use a single useI18n() call (destructured once) to access t, d, n, locale and related helpers. The skill also covers date/number formats, pluralization rules, component interpolation (i18n-t, i18n-d, i18n-n), and lazy loading of messages for performance.

When to use it

• Building Vue 3 apps that require multiple locales and type-safe translation keys
• Formatting dates, numbers, and currency according to user locale
• Rendering rich translatable content with embedded Vue components
• Implementing pluralization rules for languages with complex forms
• Setting up locale-aware routing or lazy-loading translation bundles

Best practices

• Set legacy: false in createI18n to use the Composition API mode
• Call useI18n exactly once per component and destructure all needed functions
• Use named constants for supported locale codes; avoid inline locale strings
• Wrap async locale/state updates with an equivalent to runInAction to preserve reactivity
• Define shared datetime and number formats for consistent formatting across the app
• Lazy-load locale messages for large apps to reduce initial bundle size

Example use cases

• A multi-region storefront that formats prices and dates per user locale and switches languages at runtime
• A dashboard with translatable UI and embedded links or components inside translated sentences using i18n-t
• An app supporting Russian or Arabic where custom pluralRules are required for correct plural forms
• Server-side rendered pages (Nuxt 3) that inject locale formats and messages during SSR
• Locale-based routing where availableLocales determines route generation and switcher UI