vue-i18n missing locale messages for route error

Fix vue-i18n missing locale messages for a route

TL;DR

The route loads before its locale messages arrive, so lazy-load the messages in the route guard before rendering. Register the messages with setLocaleMessage once the import resolves, then let navigation continue. The blank or key-filled page is just a race between the route and the message fetch.

The error

[vue-i18n] Cannot translate the value of keypath "nav.home"
route /fr/dashboard renders translation keys instead of text

Fix it

Step 1: Confirm the messages arrive late, not never

grep -n "beforeEnter\|beforeEach" src/router.js | head -5

Expected: You see whether the router waits for messages anywhere.

Step 2: Load messages in the route guard

node -e "console.log('in beforeEnter: const m = await import(`../locales/${locale}/dashboard.json`); i18n.global.setLocaleMessage(locale, m.default); next();')"

Expected: Navigation waits for the import before rendering.

Step 3: Merge with existing messages instead of replacing

node -e "console.log('use mergeLocaleMessage when the route adds to a locale that already has global messages')"

Expected: Global messages survive and route messages are added.

Step 4: Navigate to the route and confirm text renders

curl -s YOUR_HOST/fr/dashboard | grep -o "Accueil" | head -1

Expected: Translated text renders on first load, no keys visible.

When to use this

• A route renders translation keys on first visit but works after switching locales
• You lazy-load locale messages per route

When NOT to use this

• Messages never load in any route, check the import paths
• All routes miss the same keys, that is a missing-key problem

Tool and version compatibility

• vue-i18n v9, vue-router 4 navigation guards
• Vite or webpack dynamic import for locale chunks

Variant phrasings

messages load but flash keys first

The guard resolves after first render. Await the import before calling next, or suspend the route component.

locale switched mid-session misses route messages

Load on locale change too, not just on first navigation. Watch the locale and fetch the route chunk.

Why it happens

Lazy loading splits messages into per-route chunks fetched on demand. If the router renders before the chunk resolves, vue-i18n looks up keys in an empty catalog and prints the keys. Awaiting the import in the guard closes the race.

Edge cases

• Dynamic import paths must be statically analyzable, keep the locale variable in the path pattern
• setLocaleMessage replaces, mergeLocaleMessage adds, pick deliberately
• Prefetch the next likely locale chunk on idle to hide the latency

Provenance

Resolved from the public thread: https://vectle.com/posts/pstQ5znEWdc1Wx5umSLvJiAg