perf(layer): only bundle the Nuxt UI locales in use

layer/app/app.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ContentNavigationItem, PageCollections } from '@nuxt/content'
-import * as nuxtUiLocales from '@nuxt/ui/locale'
+import { uiLocales } from '#build/docus/ui-locales.mjs'
 import { getLocaleKey } from '../utils/locale'
 import { transformNavigation } from './utils/navigation'
 import { useDocusShortcuts } from './composables/useDocusShortcuts'
@@ -13,7 +13,8 @@ const site = useSiteConfig()
 const { locale, locales, isEnabled, switchLocalePath } = useDocusI18n()
 const { isEnabled: isAssistantEnabled } = useAssistant()
 
-const nuxtUiLocale = computed(() => nuxtUiLocales[getLocaleKey(locale.value) as keyof typeof nuxtUiLocales] || nuxtUiLocales.en)
+const nuxtApp = useNuxtApp()
+const nuxtUiLocale = computed(() => uiLocales[getLocaleKey(locale.value)] || (nuxtApp.$uiLocale as typeof uiLocales[string] | undefined) || uiLocales.en!)
 const lang = computed(() => nuxtUiLocale.value.code)
 const dir = computed(() => nuxtUiLocale.value.dir)
 const collectionName = computed(() => isEnabled.value ? `docs_${getLocaleKey(locale.value)}` : 'docs')

layer/app/error.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { NuxtError } from '#app'
 import type { ContentNavigationItem, PageCollections } from '@nuxt/content'
-import * as nuxtUiLocales from '@nuxt/ui/locale'
+import { uiLocales } from '#build/docus/ui-locales.mjs'
 import { getLocaleKey } from '../utils/locale'
 import { transformNavigation } from './utils/navigation'
 
@@ -11,7 +11,8 @@ const props = defineProps<{
 
 const { locale, locales, isEnabled, t, switchLocalePath } = useDocusI18n()
 
-const nuxtUiLocale = computed(() => nuxtUiLocales[getLocaleKey(locale.value) as keyof typeof nuxtUiLocales] || nuxtUiLocales.en)
+const nuxtApp = useNuxtApp()
+const nuxtUiLocale = computed(() => uiLocales[getLocaleKey(locale.value)] || (nuxtApp.$uiLocale as typeof uiLocales[string] | undefined) || uiLocales.en!)
 const lang = computed(() => nuxtUiLocale.value.code)
 const dir = computed(() => nuxtUiLocale.value.dir)
 

layer/app/plugins/i18n.ts

@@ -1,6 +1,7 @@
 import type { RouteLocationNormalized } from 'vue-router'
 import { consola } from 'consola'
-import { findLocaleFile, getLocaleRedirect } from '../../utils/locale'
+import { uiLocaleLoaders } from '#build/docus/ui-locales.mjs'
+import { findLocaleFile, getLocaleKey, getLocaleRedirect } from '../../utils/locale'
 
 const log = consola.withTag('docus')
 
@@ -44,6 +45,7 @@ export default defineNuxtPlugin(async () => {
 
     nuxtApp.provide('locale', locale)
     nuxtApp.provide('localeMessages', resolvedMessages)
+    nuxtApp.provide('uiLocale', await uiLocaleLoaders[getLocaleKey(locale)]?.())
 
     return
   }

layer/modules/config.ts

@@ -1,8 +1,10 @@
-import { createResolver, defineNuxtModule, logger } from '@nuxt/kit'
+import { addTemplate, addTypeTemplate, createResolver, defineNuxtModule, logger } from '@nuxt/kit'
 import { defu } from 'defu'
+import { resolveModulePath } from 'exsolve'
 import { readdirSync } from 'node:fs'
+import { dirname } from 'pathe'
 import type { ModuleOptions as AgentDiscoveryOptions } from 'nuxt-agent-discovery'
-import { findLocaleFile, normalizeLocale } from '../utils/locale'
+import { findLocaleFile, getLocaleKey, normalizeLocale } from '../utils/locale'
 import { findLocaleFolder } from '../utils/pages'
 import { getPackageJsonMetadata, resolveSiteURL } from '../utils/meta'
 import { getGitBranch, getGitEnv, getLocalGitInfo } from '../utils/git'
@@ -125,6 +127,7 @@ export default defineNuxtModule({
     ** I18N
     */
     const i18nOptions = typedNuxtOptions.i18n
+    const i18nLocaleKeys: string[] = []
 
     if (i18nOptions && typeof i18nOptions === 'object' && i18nOptions.locales) {
       const { resolve } = createResolver(import.meta.url)
@@ -190,6 +193,8 @@ export default defineNuxtModule({
         }
       }
 
+      i18nLocaleKeys.push(...filteredLocales.map(locale => getLocaleKey(locale.code)))
+
       // Expose filtered locales
       nuxt.options.runtimeConfig.public.docus = {
         ...nuxt.options.runtimeConfig.public.docus,
@@ -226,6 +231,37 @@ export default defineNuxtModule({
       })
     }
 
+    /*
+    ** Nuxt UI locales
+    */
+    const uiLocaleDir = dirname(resolveModulePath('@nuxt/ui/locale', { from: import.meta.url }))
+    const availableUiLocales = readdirSync(uiLocaleDir)
+      .filter(file => file.endsWith('.js') && file !== 'index.js')
+      .map(file => file.slice(0, -3))
+    const bundledUiLocales = [...new Set(['en', ...i18nLocaleKeys])].filter(key => availableUiLocales.includes(key))
+    const lazyUiLocales = i18nLocaleKeys.length ? [] : availableUiLocales.filter(key => !bundledUiLocales.includes(key))
+
+    addTemplate({
+      filename: 'docus/ui-locales.mjs',
+      getContents: () => [
+        `import { ${bundledUiLocales.join(', ')} } from '@nuxt/ui/locale'`,
+        `export const uiLocales = { ${bundledUiLocales.join(', ')} }`,
+        'export const uiLocaleLoaders = {',
+        ...lazyUiLocales.map(key => `  ${key}: () => import('@nuxt/ui/runtime/locale/${key}.js').then(m => m.default),`),
+        '}',
+      ].join('\n'),
+    })
+
+    addTypeTemplate({
+      filename: 'types/docus-ui-locales.d.ts',
+      getContents: () => `declare module '#build/docus/ui-locales.mjs' {
+  type UiLocale = typeof import('@nuxt/ui/locale')['en']
+  export const uiLocales: Record<string, UiLocale>
+  export const uiLocaleLoaders: Record<string, () => Promise<UiLocale>>
+}
+`,
+    })
+
     // TODO: remove once nuxt-schema-org keys its client tree-shaking by `@unhead/schema-org/vue`
     nuxt.hook('modules:done', () => {
       const clientComposables = nuxt.options.optimization.treeShake.composables.client