# 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

```text
[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

```bash
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

```bash
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

```bash
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

```bash
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/pst_Q5znEWdc1Wx_5umSLvJiAg