fix: load fallback messages on first access (#3352)

Author: BobbieGoede

src/runtime/messages.ts

@@ -1,4 +1,4 @@
-import { deepCopy, isFunction, isArray, isObject, isString } from '@intlify/shared'
+import { deepCopy, isFunction } from '@intlify/shared'
 import { createLogger } from 'virtual:nuxt-i18n-logger'
 
 import type { I18nOptions, Locale, FallbackLocale, LocaleMessages, DefineLocaleMessage } from 'vue-i18n'
@@ -35,19 +35,23 @@ export async function loadVueI18nOptions(
 }
 
 export function makeFallbackLocaleCodes(fallback: FallbackLocale, locales: Locale[]): Locale[] {
+  if (fallback === false) return []
+  if (Array.isArray(fallback)) return fallback
+
   let fallbackLocales: Locale[] = []
-  if (isArray(fallback)) {
-    fallbackLocales = fallback
-  } else if (isObject(fallback)) {
-    const targets = [...locales, 'default']
-    for (const locale of targets) {
-      if (fallback[locale]) {
-        fallbackLocales = [...fallbackLocales, ...fallback[locale].filter(Boolean)]
-      }
+  if (typeof fallback === 'string') {
+    if (locales.every(locale => locale !== fallback)) {
+      fallbackLocales.push(fallback)
     }
-  } else if (isString(fallback) && locales.every(locale => locale !== fallback)) {
-    fallbackLocales.push(fallback)
+    return fallbackLocales
   }
+
+  const targets = [...locales, 'default']
+  for (const locale of targets) {
+    if (locale in fallback == false) continue
+    fallbackLocales = [...fallbackLocales, ...fallback[locale].filter(Boolean)]
+  }
+
   return fallbackLocales
 }
 

src/runtime/plugins/route-locale-detect.ts

@@ -2,8 +2,9 @@ import { unref } from 'vue'
 import { hasPages } from '#build/i18n.options.mjs'
 import { addRouteMiddleware, defineNuxtPlugin, defineNuxtRouteMiddleware } from '#imports'
 import { createLogger } from 'virtual:nuxt-i18n-logger'
-import { detectLocale, detectRedirect, loadAndSetLocale, navigate } from '../utils'
+import { makeFallbackLocaleCodes } from '../messages'
 import { createLocaleFromRouteGetter } from '../routing/utils'
+import { detectLocale, detectRedirect, loadAndSetLocale, navigate } from '../utils'
 
 import type { NuxtApp } from '#app'
 import type { CompatRoute } from '../types'
@@ -22,6 +23,8 @@ export default defineNuxtPlugin({
 
       if (nuxtApp._vueI18n.__firstAccess) {
         nuxtApp._vueI18n.__setLocale(detected)
+        const fallbackLocales = makeFallbackLocaleCodes(unref(nuxtApp._vueI18n.global.fallbackLocale), [detected])
+        await Promise.all(fallbackLocales.map(x => nuxtApp.$i18n.loadLocaleMessages(x)))
         await nuxtApp.$i18n.loadLocaleMessages(detected)
       }