From 1ed49f9166ed638ea8263bb4d7409b02f0f15a5c Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pooya@pi0.io>
Date: Fri, 19 Aug 2022 23:38:29 +0200
Subject: [PATCH] fix(nuxt): use deep assignment for app.config hmr

---
 packages/nuxt/src/app/config.ts | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/nuxt/src/app/config.ts b/packages/nuxt/src/app/config.ts
index d8f97df8174..974db33da4b 100644
--- a/packages/nuxt/src/app/config.ts
+++ b/packages/nuxt/src/app/config.ts
@@ -1,5 +1,5 @@
 import type { AppConfig } from '@nuxt/schema'
-import { reactive } from 'vue'
+import { reactive, toRef } from 'vue'
 import { useNuxtApp } from './nuxt'
 // @ts-ignore
 import __appConfig from '#build/app.config.mjs'
@@ -7,11 +7,14 @@ import __appConfig from '#build/app.config.mjs'
 // Workaround for vite HMR with virtual modules
 export const _getAppConfig = () => __appConfig as AppConfig
 
-export function useAppConfig (): AppConfig {
+export function useAppConfig (key?: string) {
   const nuxtApp = useNuxtApp()
   if (!nuxtApp._appConfig) {
     nuxtApp._appConfig = reactive(__appConfig) as AppConfig
   }
+  if (key) {
+    return reactive(toRef(nuxtApp._appConfig, key))
+  }
   return nuxtApp._appConfig
 }
 
@@ -20,9 +23,7 @@ if (process.dev) {
   function applyHMR (newConfig: AppConfig) {
     const appConfig = useAppConfig()
     if (newConfig && appConfig) {
-      for (const key in newConfig) {
-        (appConfig as any)[key] = (newConfig as any)[key]
-      }
+      deepAssign(appConfig, newConfig)
       for (const key in appConfig) {
         if (!(key in newConfig)) {
           delete (appConfig as any)[key]
@@ -31,6 +32,17 @@ if (process.dev) {
     }
   }
 
+  function deepAssign (obj: any, newObj: any) {
+    for (const key in newObj) {
+      const val = newObj[key]
+      if (val && typeof val === 'object') {
+        deepAssign(obj[key], val)
+      } else {
+        obj[key] = val
+      }
+    }
+  }
+
   // Vite
   if (import.meta.hot) {
     import.meta.hot.accept((newModule) => {