feat(nuxt): app.config with hmr and reactivity support

packages/nuxt/src/app/config.ts

@@ -0,0 +1,36 @@
+import type { AppConfig, RuntimeConfig } from '@nuxt/schema'
+import { reactive } from 'vue'
+import { useNuxtApp } from './nuxt'
+// @ts-ignore
+import __appConfig from '#build/app.config.mjs'
+
+export const _appConfig = __appConfig as AppConfig
+
+export function useRuntimeConfig (): RuntimeConfig {
+  return useNuxtApp().$config
+}
+
+export function defineAppConfig (config: AppConfig): AppConfig {
+  return config
+}
+
+export function useAppConfig (): AppConfig {
+  const nuxtApp = useNuxtApp()
+  if (!nuxtApp._appConfig) {
+    nuxtApp._appConfig = reactive(_appConfig) as AppConfig
+  }
+  return nuxtApp._appConfig
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept((newModule) => {
+    const appConfig = useAppConfig()
+    const newConfig = newModule?._appConfig
+    if (newConfig && appConfig) {
+      // TODO: Deep assign
+      for (const key in newConfig) {
+        appConfig[key] = newConfig[key]
+      }
+    }
+  })
+}

packages/nuxt/src/app/index.ts

@@ -3,6 +3,7 @@
 export * from './nuxt'
 export * from './composables'
 export * from './components'
+export * from './config'
 
 // eslint-disable-next-line import/no-restricted-paths
 export type { PageMeta } from '../pages/runtime'

packages/nuxt/src/app/nuxt.ts

@@ -263,10 +263,6 @@ export function useNuxtApp () {
   return nuxtAppInstance
 }
 
-export function useRuntimeConfig (): RuntimeConfig {
-  return useNuxtApp().$config
-}
-
 function defineGetter<K extends string | number | symbol, V> (obj: Record<K, V>, key: K, val: V) {
   Object.defineProperty(obj, key, { get: () => val })
 }

packages/nuxt/src/auto-imports/presets.ts

@@ -49,7 +49,9 @@ export const appPreset = defineUnimportPreset({
     'isNuxtError',
     'useError',
     'createError',
-    'defineNuxtLink'
+    'defineNuxtLink',
+    'defineAppConfig',
+    'useAppConfig'
   ]
 })
 

packages/nuxt/src/core/app.ts

@@ -111,6 +111,15 @@ export async function resolveApp (nuxt: Nuxt, app: NuxtApp) {
   }
   app.plugins = uniqueBy(app.plugins, 'src')
 
+  // Resolve app.config
+  app.configs = []
+  for (const config of nuxt.options._layers.map(layer => layer.config)) {
+    const appConfigPath = await findPath(resolve(config.srcDir, 'app.config'))
+    if (appConfigPath) {
+      app.configs.push(appConfigPath)
+    }
+  }
+
   // Extend app
   await nuxt.callHook('app:resolve', app)
 }

packages/nuxt/src/core/templates.ts

@@ -176,6 +176,18 @@ export const useRuntimeConfig = () => window?.__NUXT__?.config || {}
 `
 }
 
+export const appConfigTemplate: NuxtTemplate = {
+  filename: 'app.config.mjs',
+  write: true,
+  getContents: ({ app }) => {
+    return `
+import defu from 'defu'
+${app.configs.map((id, index) => `import ${`cfg${index}`} from ${JSON.stringify(id)}`).join('\n')}
+export default defu(${app.configs.map((_id, index) => `cfg${index}`).join(', ')})
+`
+  }
+}
+
 export const publicPathTemplate: NuxtTemplate = {
   filename: 'paths.mjs',
   getContents ({ nuxt }) {

packages/schema/src/types/config.ts

@@ -21,12 +21,19 @@ type RuntimeConfigNamespace = Record<string, any>
 
 export interface PublicRuntimeConfig extends RuntimeConfigNamespace { }
 
+export interface AppConfig extends RuntimeConfigNamespace {
+  baseURL: string
+  buildAssetsDir: string
+  cdnURL: string
+}
+
 // TODO: remove before release of 3.0.0
 /** @deprecated use RuntimeConfig interface */
 export interface PrivateRuntimeConfig extends RuntimeConfigNamespace { }
 
 export interface RuntimeConfig extends PrivateRuntimeConfig, RuntimeConfigNamespace {
   public: PublicRuntimeConfig
+  app: AppConfig
 }
 
 export interface ViteConfig extends ViteUserConfig {

packages/schema/src/types/nuxt.ts

@@ -60,6 +60,7 @@ export interface NuxtApp {
   layouts: Record<string, NuxtLayout>
   middleware: NuxtMiddleware[]
   templates: NuxtTemplate[]
+  configs: string[]
 }
 
 type _TemplatePlugin = Omit<NuxtPlugin, 'src'> & NuxtTemplate

playground/app.config.ts

@@ -0,0 +1,6 @@
+// import { defineAppConfig } from '#imports'
+// console.log(defineAppConfig)
+
+export default ({
+  test: 'boo4'
+})

playground/app.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
+const appConfig = useAppConfig()
+watch(appConfig, () => {
+  console.log('App config updated:', appConfig)
+})
 </script>
 
 <template>
   <!-- Edit this file to play around with Nuxt but never commit changes! -->
   <div>
-    Nuxt 3 Playground
+    Hello World {{ appConfig }}
   </div>
 </template>