feat(i18n): support locale configuration without i18n (#1209)

Co-authored-by: Baptiste Leproux <[email protected]>

Author: ComicIvans

layer/app/app.config.ts

@@ -1,4 +1,7 @@
 export default defineAppConfig({
+  docus: {
+    locale: 'en',
+  },
   ui: {
     colors: {
       primary: 'emerald',

layer/app/app.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import type { PageCollections } from '@nuxt/content'
+import type { ContentNavigationItem, PageCollections } from '@nuxt/content'
 import * as nuxtUiLocales from '@nuxt/ui/locale'
 
 const { seo } = useAppConfig()
 const site = useSiteConfig()
 const { locale, locales, isEnabled, switchLocalePath } = useDocusI18n()
 
-const lang = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.code || 'en')
-const dir = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.dir || 'ltr')
+const nuxtUiLocale = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales] || nuxtUiLocales.en)
+const lang = computed(() => nuxtUiLocale.value.code)
+const dir = computed(() => nuxtUiLocale.value.dir)
 const collectionName = computed(() => isEnabled.value ? `docs_${locale.value}` : 'docs')
 
 useHead({
@@ -43,7 +44,7 @@ if (isEnabled.value) {
 }
 
 const { data: navigation } = await useAsyncData(() => `navigation_${collectionName.value}`, () => queryCollectionNavigation(collectionName.value as keyof PageCollections), {
-  transform: (data) => {
+  transform: (data: ContentNavigationItem[]) => {
     const rootResult = data.find(item => item.path === '/docs')?.children || data || []
 
     return rootResult.find(item => item.path === `/${locale.value}`)?.children || rootResult
@@ -58,7 +59,7 @@ provide('navigation', navigation)
 </script>
 
 <template>
-  <UApp :locale="nuxtUiLocales[locale as keyof typeof nuxtUiLocales]">
+  <UApp :locale="nuxtUiLocale">
     <NuxtLoadingIndicator color="var(--ui-primary)" />
 
     <AppHeader v-if="$route.meta.header !== false" />

layer/app/components/LanguageSelect.vue

@@ -28,6 +28,7 @@ function getEmojiFlag(locale: string): string {
     uk: 'ua', // Ukrainian -> Ukraine
     ur: 'pk', // Urdu -> Pakistan
     vi: 'vn', // Vietnamese -> Vietnam
+    es: 'es', // Spanish -> Spain
   }
 
   const baseLanguage = locale.split('-')[0]?.toLowerCase() || locale

layer/app/composables/useDocusI18n.ts

@@ -1,20 +1,22 @@
 import type { LocaleObject } from '@nuxtjs/i18n'
-import en from '../../i18n/locales/en.json'
 
 export const useDocusI18n = () => {
   const config = useRuntimeConfig().public
   const isEnabled = ref(!!config.i18n)
 
   if (!isEnabled.value) {
+    const locale = useNuxtApp().$locale as string
+    const localeMessages = useNuxtApp().$localeMessages as Record<string, unknown>
+
     return {
       isEnabled,
-      locale: ref('en'),
+      locale: ref(locale),
       locales: [],
       localePath: (path: string) => path,
       switchLocalePath: () => {},
       t: (key: string): string => {
         const path = key.split('.')
-        return path.reduce((acc: unknown, curr) => (acc as Record<string, unknown>)?.[curr], en) as string
+        return path.reduce((acc: unknown, curr) => (acc as Record<string, unknown>)?.[curr], localeMessages) as string
       },
     }
   }

layer/app/error.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { NuxtError } from '#app'
-import type { PageCollections } from '@nuxt/content'
+import type { ContentNavigationItem, PageCollections } from '@nuxt/content'
 import * as nuxtUiLocales from '@nuxt/ui/locale'
 
 const props = defineProps<{
@@ -9,8 +9,10 @@ const props = defineProps<{
 
 const { locale, locales, isEnabled, t, switchLocalePath } = useDocusI18n()
 
-const lang = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.code || 'en')
-const dir = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.dir || 'ltr')
+const nuxtUiLocale = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales] || nuxtUiLocales.en)
+const lang = computed(() => nuxtUiLocale.value.code)
+const dir = computed(() => nuxtUiLocale.value.dir)
+
 useHead({
   htmlAttrs: {
     lang,
@@ -22,6 +24,7 @@ const localizedError = computed(() => {
   return {
     ...props.error,
     statusMessage: t('common.error.title'),
+    message: t('common.error.description'),
   }
 })
 
@@ -44,7 +47,7 @@ if (isEnabled.value) {
 const collectionName = computed(() => isEnabled.value ? `docs_${locale.value}` : 'docs')
 
 const { data: navigation } = await useAsyncData(`navigation_${collectionName.value}`, () => queryCollectionNavigation(collectionName.value as keyof PageCollections), {
-  transform: (data) => {
+  transform: (data: ContentNavigationItem[]) => {
     const rootResult = data.find(item => item.path === '/docs')?.children || data || []
 
     return rootResult.find(item => item.path === `/${locale.value}`)?.children || rootResult
@@ -59,7 +62,7 @@ provide('navigation', navigation)
 </script>
 
 <template>
-  <UApp>
+  <UApp :locale="nuxtUiLocale">
     <AppHeader />
 
     <UError :error="localizedError" />

layer/app/plugins/i18n.ts

@@ -1,12 +1,34 @@
-export default defineNuxtPlugin(() => {
+import en from '../../i18n/locales/en.json'
+import type { RouteLocationNormalized } from 'vue-router'
+
+export default defineNuxtPlugin(async () => {
   const nuxtApp = useNuxtApp()
 
   const i18nConfig = nuxtApp.$config.public.i18n
+
+  // If i18n is not enabled, fetch and provide the configured locale in app config
   if (!i18nConfig) {
-    return
+    let locale = 'en'
+    let resolvedMessages: Record<string, unknown> = en
+
+    const appConfig = useAppConfig()
+    const configuredLocale = appConfig.docus.locale
+    if (configuredLocale !== 'en') {
+      const localeMessages = await import(`../../i18n/locales/${configuredLocale}.json`)
+      if (!localeMessages) {
+        console.warn(`[Docus] Missing locale file for "${configuredLocale}". Falling back to "en".`)
+      }
+      else {
+        locale = configuredLocale
+        resolvedMessages = localeMessages
+      }
+    }
+
+    nuxtApp.provide('locale', locale)
+    nuxtApp.provide('localeMessages', resolvedMessages)
   }
 
-  addRouteMiddleware((to) => {
+  addRouteMiddleware((to: RouteLocationNormalized) => {
     if (to.path === '/') {
       const cookieLocale = useCookie('i18n_redirected').value || i18nConfig.defaultLocale || 'en'
 

layer/app/types/index.d.ts

@@ -1,5 +1,8 @@
 declare module 'nuxt/schema' {
   interface AppConfig {
+    docus: {
+      locale: string
+    }
     seo: {
       titleTemplate: string
       title: string