fix(bridge, nuxt3): backward compatibility to access runtime config in client (#4283)

packages/bridge/src/runtime/composables.ts

@@ -25,7 +25,25 @@ export const useHydration = mock()
 export const useRuntimeConfig = () => {
   const nuxtApp = useNuxtApp()
   if (!nuxtApp.$config) {
-    nuxtApp.$config = reactive(nuxtApp.nuxt2Context.app.$config)
+    const runtimeConfig = reactive(nuxtApp.nuxt2Context.app.$config)
+    const copatibilityConfig = new Proxy(runtimeConfig, {
+      get (target, prop) {
+        if (prop === 'public') {
+          return target.public
+        }
+        return target[prop] ?? target.public[prop]
+      },
+      set (target, prop, value) {
+        if (prop === 'public' || prop === 'app') {
+          return false // Throws TypeError
+        }
+        target[prop] = value
+        target.public[prop] = value
+        return true
+      }
+    })
+    nuxtApp.provide('config', copatibilityConfig)
+    nuxtApp.$config = copatibilityConfig
   }
   return nuxtApp.$config as RuntimeConfig
 }

packages/nuxt3/src/app/nuxt.ts

@@ -127,7 +127,24 @@ export function createNuxtApp (options: CreateOptions) {
       app: options.ssrContext.runtimeConfig.app
     }
   } else {
-    nuxtApp.provide('config', reactive(nuxtApp.payload.config))
+    const runtimeConfig = reactive(nuxtApp.payload.config)
+    const copatibilityConfig = new Proxy(runtimeConfig, {
+      get (target, prop) {
+        if (prop === 'public') {
+          return target.public
+        }
+        return target[prop] ?? target.public[prop]
+      },
+      set (target, prop, value) {
+        if (prop === 'public' || prop === 'app') {
+          return false // Throws TypeError
+        }
+        target[prop] = value
+        target.public[prop] = value
+        return true
+      }
+    })
+    nuxtApp.provide('config', copatibilityConfig)
   }
 
   return nuxtApp