How to Translate a Vue App With Vue I18n

Quick answer — Vue I18n provides a global message catalogue, a composable for reading it and built-in plural and date formatting. The two decisions worth making early are where messages live and whether the app is a public site that has to be indexed.

Global or per-component messages

Vue I18n allows a single global catalogue or messages scoped to individual components. Both work and they solve different problems. Global keeps everything discoverable and makes extraction simple. Per-component keeps a component self-contained, which suits a design system or a large team, at the cost of strings scattered across the tree where no one can audit them.

Pick one convention. Mixing them is how a project ends up unable to answer how many strings it has.

Composition and Options API

The composable and the options-based approach coexist, and a codebase in the middle of a migration will contain both. That is workable but it means two patterns for the same task, which new contributors get wrong.

Standardise on one for new code.

Message syntax carries real features

Named and list interpolation, linked messages that reference another key, plural forms with pipe separation, and number and date formatting through Intl.

Linked messages are the underused one. A product name defined once and referenced everywhere means renaming it is a single edit rather than a find-and-replace across fourteen catalogues.

Plurals need the right form count

Pipe-separated forms map to the target language's rules. English needs two; several languages need more, and a catalogue that supplies two for a six-form language falls back for the missing cases.

If it is a public site

A client-rendered Vue app has the same visibility problem as any other: the crawler may see an English shell. Server rendering through Nuxt, or a translation layer such as website translation, is what puts translated HTML in front of a search engine.

For an internal tool, none of that matters and the library alone is enough.

Keeping catalogues honest

Extraction from source, checked in CI, so a new string cannot ship without a catalogue entry. translation memory then keeps each release's cost proportional to the diff, and quality control verifies interpolation tokens survived.

Setup notes are on the Vue integration page.

Fallback chains

Vue I18n supports a fallback locale, and a chain — Canadian French falling back to French, then to English. Configure it deliberately rather than letting every gap land on English. Silent fallback is convenient and it hides missing translations. Turn on the warning in development so a gap is visible to whoever introduced it.

SFC custom blocks

Single-file components can carry an i18n block holding their own messages. It is convenient and it scatters strings across the codebase, so decide as a team whether it is allowed before it appears in fifty components.

Lazy loading the catalogues

Shipping every language to every visitor is the default in a naive setup and it is pure waste. Load the active locale's messages asynchronously and fetch others only when a user switches.

On a large application this is a meaningful bundle reduction, and it is far easier to build in from the start than to retrofit once the message files have grown.

Where to start

Render one page in the target language and view source. If the translated text is in the HTML, search engines can read it. If it only appears after hydration, it is a client-side render and needs the server side solved first.

FAQ

Should Vue I18n messages be global or per-component? Either works, but pick one. Global keeps strings discoverable and extraction simple; per-component keeps a component self-contained at the cost of strings scattered where nobody can audit them.

What are linked messages in Vue I18n? Keys that reference another key, so a product name defined once can be reused everywhere. Renaming it then becomes a single edit rather than a find-and-replace across every catalogue.

How are plurals handled? Through pipe-separated forms mapped to the target language's rules. English needs two forms and several languages need more, so supplying two for a six-form language leaves the rest falling back.

Does a Vue app need server rendering to rank? If it is a public site, yes, or a translation layer serving translated HTML. A client-rendered app can present a crawler with an English shell no matter how complete the catalogue is.