Fix: HMR locale messages flash

[sawa-ko]

🔗 Linked issue

Fix: #4009

📚 Description

Editing locale files in dev could briefly render raw translation keys because locale messages were reset before async reload completed. This updates the HMR reset path to compute the next locale payload first, then replace composer messages in a single write.

• Root cause

  • resetI18nProperties() called setLocaleMessage(..., {}) (or base-only config) before loadMessages, creating a reactive empty/intermediate state during locale-file HMR.

• Runtime plugin update (src/runtime/plugins/dev.ts)

  • Expanded imports to use localeLoaders, getLocaleMessagesMerged, and deepCopy.
  • Replaced two-step reset/load flow with load+merge+set:
    • read base messages from vue-i18n config
    • load locale file messages via getLocaleMessagesMerged(locale, localeLoaders[locale])
    • deep-merge into a fresh object
    • call setLocaleMessage once with the merged result

• Behavioral impact

  • Avoids flash of untranslated keys during HMR.
  • Keeps replacement semantics for locale messages (removed keys are not retained from prior composer state).

    const baseMessages = opts?.messages?.[k] ?? {}                                                                                                                                                                                                                                                                
    try {                                                                                                                                                                                                                                                                                                         
      const fileMessages = await nuxt.runWithContext(() =>                                                                                                                                                                                                                                                        
        getLocaleMessagesMerged(k, localeLoaders[k] || [])                                                                                                                                                                                                                                                        
      )                                                                                                                                                                                                                                                                                                           
      const merged: Record<string, unknown> = {}                                                                                                                                                                                                                                                                  
      deepCopy(baseMessages, merged)                                                                                                                                                                                                                                                                              
      deepCopy(fileMessages, merged)                                                                                                                                                                                                                                                                              
      composer.setLocaleMessage(k, merged)                                                                                                                                                                                                                                                                        
    } catch (e) {                                                                                                                                                                                                                                                                                                 
      console.warn(`Failed to load messages for locale "${k}"`, e)                                                                                                                                                                                                                                                
    }

Summary by CodeRabbit

• Bug Fixes
  • Improved locale message reloading in development mode with enhanced error handling.
  • Added diagnostic warnings to help identify locale loading and merging issues.
  • Increased reliability of message updates when switching locales during development.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 744be6c2-81eb-475a-810d-e7e0bc401812

📥 Commits

Reviewing files that changed from the base of the PR and between bd54cb9 and 949f158.

📒 Files selected for processing (1)

• src/runtime/plugins/dev.ts

---

Walkthrough

The dev-mode plugin (src/runtime/plugins/dev.ts) updates resetI18nProperties to replace the previous direct message reset with a per-locale merge strategy. For each locale key, it deep-copies base config messages from opts?.messages?.[k] and deep-copies in messages loaded via getLocaleMessagesMerged(k, localeLoaders[k] || []) into a merged object, then calls composer.setLocaleMessage(k, merged). The entire per-locale block is wrapped in a try/catch that issues a console.warn on failure. deepCopy is added as an import from @intlify/shared, with minor reordering of other imports.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fix: HMR locale messages flash' directly addresses the main issue resolved in this pull request—preventing the flashing of untranslated keys during HMR in dev mode. It is concise, specific, and clearly summarizes the primary change.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}