fix: allow to visit the global i18n

Teages · Apr 8, 2024 · 03d0d98 · 03d0d98
1 parent 3579ae6
commit 03d0d98
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 17 deletions.
diff --git 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
@@ -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
+ }
+}