fix: reuse nuxt instance at plugin setup (#3690)

Author: BobbieGoede

src/runtime/internal.ts

@@ -1,13 +1,13 @@
 import { isString } from '@intlify/shared'
-import { useCookie, useNuxtApp, useRequestHeader, useRuntimeConfig } from '#imports'
+import { useCookie, useRequestHeader, useRuntimeConfig } from '#imports'
 import { DEFAULT_COOKIE_KEY, isSSG, localeCodes, normalizedLocales } from '#build/i18n.options.mjs'
 import { findBrowserLocale, regexpPath } from './routing/utils'
 import { initCommonComposableOptions } from './utils'
 import { createLogger } from '#nuxt-i18n/logger'
 
 import type { Locale } from 'vue-i18n'
 import type { DetectBrowserLanguageOptions, I18nPublicRuntimeConfig } from '#internal-i18n-types'
-import type { CookieOptions, CookieRef } from 'nuxt/app'
+import type { CookieOptions, CookieRef, NuxtApp } from 'nuxt/app'
 import type { CompatRoute } from './types'
 import type { CommonComposableOptions } from './utils'
 
@@ -110,6 +110,7 @@ type DetectBrowserLanguageResult = {
 }
 
 export function detectBrowserLanguage(
+  nuxtApp: NuxtApp,
   route: string | CompatRoute,
   localeCookie: string | undefined,
   locale: Locale = ''
@@ -122,7 +123,6 @@ export function detectBrowserLanguage(
     return { locale: '', error: 'disabled' }
   }
 
-  const nuxtApp = useNuxtApp()
   const strategy = nuxtApp.$i18n.strategy
   const firstAccess = nuxtApp._vueI18n.__firstAccess
 

src/runtime/plugins/i18n.ts

@@ -36,10 +36,11 @@ export default defineNuxtPlugin({
   name: 'i18n:plugin',
   parallel: parallelPlugin,
   async setup(_nuxt) {
+    // @ts-expect-error untyped internal id parameter
+    const nuxt = useNuxtApp(_nuxt._id)
     Object.defineProperty(_nuxt.versions, 'nuxtI18n', { get: () => __NUXT_I18N_VERSION__ })
 
     const logger = /*#__PURE__*/ createLogger('plugin:i18n')
-    const nuxt = useNuxtApp()
     const _runtimeI18n = nuxt.$config.public.i18n as I18nPublicRuntimeConfig
 
     const defaultLocaleDomain = getDefaultLocaleForDomain(_runtimeI18n)
@@ -110,7 +111,7 @@ export default defineNuxtPlugin({
           () => normalizedLocales.find(l => l.code === composer.locale.value) || { code: composer.locale.value }
         )
         composer.setLocale = async (locale: string) => {
-          await loadAndSetLocale(locale, i18n.__firstAccess)
+          await loadAndSetLocale(nuxt, locale, i18n.__firstAccess)
 
           if (composer.strategy === 'no_prefix' || !hasPages) {
             await composer.loadLocaleMessages(locale)
@@ -120,7 +121,7 @@ export default defineNuxtPlugin({
 
           const route = nuxt.$router.currentRoute.value
           const redirectPath = await nuxt.runWithContext(() =>
-            detectRedirect({ to: route, locale, routeLocale: i18n.__localeFromRoute(route) })
+            detectRedirect({ to: route, nuxtApp: nuxt, locale, routeLocale: i18n.__localeFromRoute(route) })
           )
 
           __DEBUG__ && logger.log('redirectPath on setLocale', redirectPath)

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

@@ -10,13 +10,15 @@ import type { CompatRoute } from '../types'
 export default defineNuxtPlugin({
   name: 'i18n:plugin:route-locale-detect',
   dependsOn: ['i18n:plugin'],
-  async setup() {
+  async setup(_nuxt) {
+    // @ts-expect-error untyped internal id parameter
+    const nuxt = useNuxtApp(_nuxt._id)
     const logger = /*#__PURE__*/ createLogger('plugin:route-locale-detect')
-    const nuxt = useNuxtApp()
     const currentRoute = nuxt.$router.currentRoute
 
     async function handleRouteDetect(to: CompatRoute) {
       let detected = detectLocale(
+        nuxt,
         to,
         nuxt._vueI18n.__localeFromRoute(to),
         unref(nuxt.$i18n.locale),
@@ -30,7 +32,7 @@ export default defineNuxtPlugin({
         await nuxt.$i18n.loadLocaleMessages(detected)
       }
 
-      const modified = await nuxt.runWithContext(() => loadAndSetLocale(detected, nuxt._vueI18n.__firstAccess))
+      const modified = await nuxt.runWithContext(() => loadAndSetLocale(nuxt, detected, nuxt._vueI18n.__firstAccess))
       if (modified) {
         detected = unref(nuxt.$i18n.locale)
       }
@@ -51,7 +53,7 @@ export default defineNuxtPlugin({
       const locale = await nuxt.runWithContext(() => handleRouteDetect(to))
 
       const redirectPath = await nuxt.runWithContext(() =>
-        detectRedirect({ to, from, locale, routeLocale: nuxt._vueI18n.__localeFromRoute(to) }, true)
+        detectRedirect({ to, nuxtApp: nuxt, from, locale, routeLocale: nuxt._vueI18n.__localeFromRoute(to) }, true)
       )
 
       nuxt._vueI18n.__firstAccess = false

src/runtime/plugins/ssg-detect.ts

@@ -8,8 +8,9 @@ export default defineNuxtPlugin({
   name: 'i18n:plugin:ssg-detect',
   dependsOn: ['i18n:plugin', 'i18n:plugin:route-locale-detect'],
   enforce: 'post',
-  setup() {
-    const nuxt = useNuxtApp()
+  setup(_nuxt) {
+    // @ts-expect-error untyped internal id parameter
+    const nuxt = useNuxtApp(_nuxt._id)
     if (!isSSG || nuxt.$i18n.strategy !== 'no_prefix' || !runtimeDetectBrowserLanguage()) return
 
     const logger = /*#__PURE__*/ createLogger('plugin:i18n:ssg-detect')
@@ -18,6 +19,7 @@ export default defineNuxtPlugin({
     // NOTE: avoid hydration mismatch for SSG mode
     nuxt.hook('app:mounted', async () => {
       const detected = detectBrowserLanguage(
+        nuxt,
         nuxt.$router.currentRoute.value,
         localeCookie,
         localeCookie || unref(nuxt.$i18n.defaultLocale)

src/runtime/plugins/switch-locale-path-ssr.ts

@@ -6,8 +6,9 @@ import { SWITCH_LOCALE_PATH_LINK_IDENTIFIER } from '#build/i18n.options.mjs'
 export default defineNuxtPlugin({
   name: 'i18n:plugin:switch-locale-path-ssr',
   dependsOn: ['i18n:plugin'],
-  setup() {
-    const nuxt = useNuxtApp()
+  setup(_nuxt) {
+    // @ts-expect-error untyped internal id parameter
+    const nuxt = useNuxtApp(_nuxt._id)
     if (nuxt.$config.public.i18n.experimental.switchLocalePathLinkSSR !== true) return
 
     const switchLocalePath = useSwitchLocalePath()

src/runtime/utils.ts

@@ -50,11 +50,14 @@ export function initCommonComposableOptions(i18n?: I18n): CommonComposableOption
   }
 }
 
-export async function loadAndSetLocale(newLocale: Locale, initial: boolean = false): Promise<boolean> {
+export async function loadAndSetLocale(
+  nuxtApp: NuxtApp,
+  newLocale: Locale,
+  initial: boolean = false
+): Promise<boolean> {
   const logger = /*#__PURE__*/ createLogger('loadAndSetLocale')
-  const nuxtApp = useNuxtApp()
   const { differentDomains, skipSettingLocaleOnNavigate } = nuxtApp.$config.public.i18n
-  const opts = runtimeDetectBrowserLanguage()
+  const opts = runtimeDetectBrowserLanguage(nuxtApp.$config.public.i18n as I18nPublicRuntimeConfig)
 
   const oldLocale = unref(nuxtApp.$i18n.locale)
   const localeCodes = unref(nuxtApp.$i18n.localeCodes)
@@ -124,17 +127,17 @@ export async function loadAndSetLocale(newLocale: Locale, initial: boolean = fal
 }
 
 export function detectLocale(
+  nuxtApp: NuxtApp,
   route: string | CompatRoute,
   routeLocale: string,
   currentLocale: string | undefined,
   localeCookie: string | undefined
 ) {
-  const nuxtApp = useNuxtApp()
   const { strategy, defaultLocale, differentDomains, multiDomainLocales } = nuxtApp.$config.public.i18n
   const _detectBrowserLanguage = runtimeDetectBrowserLanguage()
   const logger = /*#__PURE__*/ createLogger('detectLocale')
 
-  const detectedBrowser = detectBrowserLanguage(route, localeCookie, currentLocale)
+  const detectedBrowser = detectBrowserLanguage(nuxtApp, route, localeCookie, currentLocale)
   __DEBUG__ && logger.log({ detectBrowserLanguage: detectedBrowser })
 
   // detected browser language
@@ -167,6 +170,7 @@ export function detectLocale(
 }
 
 type DetectRedirectOptions = {
+  nuxtApp: NuxtApp
   to: CompatRoute
   from?: CompatRoute
   /**
@@ -184,9 +188,12 @@ type DetectRedirectOptions = {
  *
  * @param inMiddleware - whether this is called during navigation middleware
  */
-export function detectRedirect({ to, from, locale, routeLocale }: DetectRedirectOptions, inMiddleware = false): string {
+export function detectRedirect(
+  { to, nuxtApp, from, locale, routeLocale }: DetectRedirectOptions,
+  inMiddleware = false
+): string {
   // no locale change detected from routing
-  if (routeLocale === locale || useNuxtApp().$i18n.strategy === 'no_prefix') {
+  if (routeLocale === locale || nuxtApp.$i18n.strategy === 'no_prefix') {
     return ''
   }