From 03d0d983ecf79db02824666eb73c5dd70856fcfa Mon Sep 17 00:00:00 2001
From: Teages <Teages@teages.xyz>
Date: Tue, 9 Apr 2024 03:32:15 +0800
Subject: [PATCH] fix: allow to visit the global i18n

---
 src/runtime/composables/locale.ts | 27 +++++++++++++++----
 src/runtime/plugins/locale.ts     | 43 ++++++++++++++++++++++---------
 2 files changed, 53 insertions(+), 17 deletions(-)

diff --git a/src/runtime/composables/locale.ts b/src/runtime/composables/locale.ts
index 492378a..2f6c74c 100644
--- a/src/runtime/composables/locale.ts
+++ b/src/runtime/composables/locale.ts
@@ -1,10 +1,18 @@
-import { useI18n } from 'vue-i18n'
+import { type UseI18nOptions, useI18n } from 'vue-i18n'
 import type { WritableComputedRef } from 'vue'
 import { useLocalesInternal } from './internal'
 import { type LocaleCode, lazyImportLang } from '#build/locales/lazy-import'
-import { computed, useHead } from '#imports'
+import { computed, useHead, useNuxtApp } from '#imports'
 
-export function useLocales(): {
+type useLocalesArgsType = {
+  // get the global i18n instance, it is very useful when you want to use $t out of setup()
+  global: true
+} | {
+  global?: false
+  i18n: UseI18nOptions
+}
+
+interface useLocalesReturnType {
   t: ReturnType<typeof useI18n>['t']
   loadedLocales: LocaleCode[]
   locales: ReturnType<typeof useLocalesInternal>['locales']
@@ -13,8 +21,16 @@ export function useLocales(): {
   userPrefer: ReturnType<typeof useLocalesInternal>['userPrefer']
   browserPrefer: ReturnType<typeof useLocalesInternal>['browserPrefer']
   browserMatch: ReturnType<typeof useLocalesInternal>['browserMatch']
-} {
-  const { locale: _locale, availableLocales: loadedLocales, t, setLocaleMessage } = useI18n()
+  i18n: ReturnType<typeof useI18n>
+}
+
+export function useLocales(options?: useLocalesArgsType): useLocalesReturnType {
+  const i18n = options?.global === true
+    ? useNuxtApp().$i18n.global
+    : useI18n()
+
+  const { locale: _locale, availableLocales: loadedLocales, t, setLocaleMessage } = i18n as ReturnType<typeof useI18n>
+
   const { locales, browserPrefer, browserMatch, userPrefer } = useLocalesInternal()
 
   const setLocaleWithoutSave = async (code: LocaleCode) => {
@@ -51,5 +67,6 @@ export function useLocales(): {
     userPrefer,
     browserPrefer,
     browserMatch,
+    i18n,
   }
 }
diff --git a/src/runtime/plugins/locale.ts b/src/runtime/plugins/locale.ts
index 8bbaf1c..81f35aa 100644
--- a/src/runtime/plugins/locale.ts
+++ b/src/runtime/plugins/locale.ts
@@ -1,21 +1,14 @@
-import { createI18n } from 'vue-i18n'
+import { createI18n as _createI18n } from 'vue-i18n'
 import { decodeBrowserAcceptLang, lazyImportLang } from '../utils'
 import { useLocalesInternal } from '../composables/internal'
 import { defineNuxtPlugin, useHead, useRequestHeaders } from '#imports'
 import { defaultLang } from '#build/locales/available'
+import type { LocaleCode } from '#build/locales/lazy-import'
 
-export default defineNuxtPlugin(async (nuxtApp) => {
-  const { browserPrefer, browserMatch, userPrefer } = useLocalesInternal()
-
-  if (import.meta.server) {
-    const rawAcceptLang = useRequestHeaders(['accept-language'])['accept-language'] ?? ''
-    browserPrefer.value = [...decodeBrowserAcceptLang(rawAcceptLang)]
-  }
+type I18n = Awaited<ReturnType<typeof createI18n>>
 
-  // setup i18n
-  const locale = userPrefer.value ?? browserMatch.value ?? defaultLang
-  const vueApp = nuxtApp.vueApp
-  const i18n = createI18n({
+async function createI18n(locale: LocaleCode) {
+  return _createI18n({
     locale,
     legacy: false,
     globalInjection: true,
@@ -29,6 +22,20 @@ export default defineNuxtPlugin(async (nuxtApp) => {
         : {}),
     },
   })
+}
+
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const { browserPrefer, browserMatch, userPrefer } = useLocalesInternal()
+
+  if (import.meta.server) {
+    const rawAcceptLang = useRequestHeaders(['accept-language'])['accept-language'] ?? ''
+    browserPrefer.value = [...decodeBrowserAcceptLang(rawAcceptLang)]
+  }
+
+  // setup i18n
+  const locale = userPrefer.value ?? browserMatch.value ?? defaultLang
+  const vueApp = nuxtApp.vueApp
+  const i18n = await createI18n(locale)
   vueApp.use(i18n)
 
   if (import.meta.server) {
@@ -38,4 +45,16 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       },
     })
   }
+
+  return {
+    provide: {
+      i18n,
+    },
+  }
 })
+
+declare module '#app' {
+  interface NuxtApp {
+    $i18n: I18n
+  }
+}