Internationalisation (i18n) — supporting multiple languages — is one of those things that is straightforward to design in early and painful to retrofit after your UI is full of hardcoded strings. Vue I18n is the standard library for it in the Vue ecosystem, and it handles the mechanics well. The effort that matters is structuring your translations sensibly and remembering that i18n is about more than swapping words.
Structure the messages
Translations live in message objects keyed by locale, and you reference them by key in your components rather than hardcoding text. Structure the keys thoughtfully — nested by feature or view — so a large translation set stays navigable and translators can find what they need. A flat file of hundreds of ungrouped keys becomes unmaintainable; a well-organised hierarchy scales.
const messages = {
en: { cart: { empty: 'Your cart is empty', items: '{count} items' } },
sw: { cart: { empty: 'Kikapu chako ni tupu', items: 'Bidhaa {count}' } },
}
// In a template: {{ $t('cart.empty') }}
// {{ $t('cart.items', { count }) }}Interpolation and pluralisation
Text is rarely static. Vue I18n handles interpolation (inserting values like a name or count into a message) and pluralisation (different wording for zero, one, and many), which matters because plural rules differ by language — some have more than two plural forms. Let the library handle these rather than concatenating strings yourself, because naive string-building produces grammatically wrong translations in many languages.
Lazy-load and localise formats
- Lazy-load locales — ship only the active language's messages and load others on demand, so translations do not bloat the initial bundle.
- Localise dates, numbers, and currency — these formats differ by locale as much as text does; use locale-aware formatting, not a fixed format.
- Handle text direction and length — some languages read right-to-left, and translated text can be much longer, so design layouts that flex.
The mistake teams make is treating i18n as find-and-replace on text while leaving dates, numbers, currency, and layout assumptions hardcoded. A truly localised app formats every locale-sensitive value correctly and adapts its layout to different text lengths and directions. Plan for all of it from the start — retrofitting date formatting and RTL support after launch is far harder than building it in.
Vue I18n gives a Vue 3 app solid internationalisation: message objects referenced by structured keys, proper interpolation and pluralisation, lazy-loaded locales, and locale-aware formatting of dates and numbers. Build it in from the start rather than retrofitting, and think past text to formats, direction, and layout — because real localisation adapts the whole experience to the locale, not just the words on screen.
Independent software engineer in Nairobi specialising in Acumatica customisations, Laravel backends, and tax fiscalisation integrations across East and Southern Africa.