feat(nuxt): app.config improvements (#6905)

docs/content/3.api/1.composables/update-app-config.md

@@ -0,0 +1,20 @@
+# `updateAppConfig`
+
+::StabilityEdge
+::
+
+Updates [app config](/guide/features/app-config) using deep assignment. Existing (nested) properties will be preserved.
+
+**Usage:**
+
+```js
+const appConfig = useAppConfig() // { foo: 'bar' }
+
+const newAppConfig = { foo: 'baz' }
+
+updateAppConfig(newAppConfig)
+
+console.log(appConfig) // { foo: 'baz' }
+```
+
+::ReadMore{link="/guide/features/app-config"}

examples/advanced/config-extends/app.config.ts

@@ -1,5 +1,10 @@
 export default defineAppConfig({
   foo: 'user',
   bar: 'user',
-  baz: 'base'
+  baz: 'base',
+  array: [
+    'user',
+    'user',
+    'user'
+  ]
 })

examples/advanced/config-extends/base/app.config.ts

@@ -1,4 +1,18 @@
 export default defineAppConfig({
   bar: 'base',
-  baz: 'base'
+  baz: 'base',
+  array: () => [
+    'base',
+    'base',
+    'base'
+  ],
+  arrayNested: {
+    nested: {
+      array: [
+        'base',
+        'base',
+        'base'
+      ]
+    }
+  }
 })

packages/nuxt/src/app/config.ts

@@ -4,27 +4,20 @@ import { useNuxtApp } from './nuxt'
 // @ts-ignore
 import __appConfig from '#build/app.config.mjs'
 
+type DeepPartial<T> = T extends Function ? T : T extends Record<string, any> ? { [P in keyof T]?: DeepPartial<T[P]> } : T
+
 // Workaround for vite HMR with virtual modules
 export const _getAppConfig = () => __appConfig as AppConfig
 
-export function useAppConfig (): AppConfig {
-  const nuxtApp = useNuxtApp()
-  if (!nuxtApp._appConfig) {
-    nuxtApp._appConfig = reactive(__appConfig) as AppConfig
-  }
-  return nuxtApp._appConfig
+function deepDelete (obj: any, newObj: any) {
+  for (const key in obj) {
+    const val = newObj[key]
+    if (!(key in newObj)) {
+      delete (obj as any)[key]
     }
 
-// HMR Support
-if (process.dev) {
-  function applyHMR (newConfig: AppConfig) {
-    const appConfig = useAppConfig()
-    if (newConfig && appConfig) {
-      deepAssign(appConfig, newConfig)
-      for (const key in appConfig) {
-        if (!(key in newConfig)) {
-          delete (appConfig as any)[key]
-        }
+    if (val !== null && typeof val === 'object') {
+      deepDelete(obj[key], newObj[key])
     }
   }
 }
@@ -40,6 +33,34 @@ if (process.dev) {
   }
 }
 
+export function useAppConfig (): AppConfig {
+  const nuxtApp = useNuxtApp()
+  if (!nuxtApp._appConfig) {
+    nuxtApp._appConfig = reactive(__appConfig) as AppConfig
+  }
+  return nuxtApp._appConfig
+}
+
+/**
+ * Deep assign the current appConfig with the new one.
+ *
+ * Will preserve existing properties.
+ */
+export function updateAppConfig (appConfig: DeepPartial<AppConfig>) {
+  const _appConfig = useAppConfig()
+  deepAssign(_appConfig, appConfig)
+}
+
+// HMR Support
+if (process.dev) {
+  function applyHMR (newConfig: AppConfig) {
+    const appConfig = useAppConfig()
+    if (newConfig && appConfig) {
+      deepAssign(appConfig, newConfig)
+      deepDelete(appConfig, newConfig)
+    }
+  }
+
   // Vite
   if (import.meta.hot) {
     import.meta.hot.accept((newModule) => {

packages/nuxt/src/core/templates.ts

@@ -207,12 +207,13 @@ export const appConfigTemplate: NuxtTemplate = {
   write: true,
   getContents: ({ app, nuxt }) => {
     return `
-import defu from 'defu'
+import { defuFn } from 'defu'
 
 const inlineConfig = ${JSON.stringify(nuxt.options.appConfig, null, 2)}
 
 ${app.configs.map((id: string, index: number) => `import ${`cfg${index}`} from ${JSON.stringify(id)}`).join('\n')}
-export default defu(${app.configs.map((_id: string, index: number) => `cfg${index}`).concat(['inlineConfig']).join(', ')})
+
+export default defuFn(${app.configs.map((_id: string, index: number) => `cfg${index}`).concat(['inlineConfig']).join(', ')})
 `
   }
 }

packages/nuxt/src/imports/presets.ts

@@ -51,6 +51,7 @@ const appPreset = defineUnimportPreset({
     'createError',
     'defineNuxtLink',
     'useAppConfig',
+    'updateAppConfig',
     'defineAppConfig',
     'preloadComponents',
     'prefetchComponents'