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

packages/kit/package.json

@@ -31,7 +31,7 @@
     "semver": "^7.3.7",
     "unctx": "^2.0.0",
     "unimport": "^0.6.5",
-    "untyped": "^0.4.4"
+    "untyped": "^0.4.5"
   },
   "devDependencies": {
     "@types/lodash.template": "^4",

packages/nuxi/src/commands/dev.ts

@@ -116,7 +116,7 @@ export default defineNuxtCommand({
           dLoad(true, `Directory \`${relativePath}/\` ${event === 'addDir' ? 'created' : 'removed'}`)
         }
       } else if (isFileChange) {
-        if (file.match(/(app|error)\.(js|ts|mjs|jsx|tsx|vue)$/)) {
+        if (file.match(/(app|error|app\.config)\.(js|ts|mjs|jsx|tsx|vue)$/)) {
           dLoad(true, `\`${relativePath}\` ${event === 'add' ? 'created' : 'removed'}`)
         }
       }

packages/nuxt/package.json

@@ -65,7 +65,7 @@
     "unenv": "^0.5.2",
     "unimport": "^0.6.5",
     "unplugin": "^0.8.1",
-    "untyped": "^0.4.4",
+    "untyped": "^0.4.5",
     "vue": "^3.2.37",
     "vue-bundle-renderer": "^0.3.9",
     "vue-router": "^4.1.3"

packages/nuxt/src/app/config.ts

@@ -0,0 +1,57 @@
+import type { AppConfig, RuntimeConfig } from '@nuxt/schema'
+import { reactive } from 'vue'
+import { useNuxtApp } from './nuxt'
+// @ts-ignore
+import __appConfig from '#build/app.config.mjs'
+
+// Workaround for vite HMR with virtual modules
+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
+}
+
+// HMR Support
+if (process.dev) {
+  function applyHMR (newConfig) {
+    const appConfig = useAppConfig()
+    if (newConfig && appConfig) {
+      for (const key in newConfig) {
+        appConfig[key] = newConfig[key]
+      }
+      for (const key in appConfig) {
+        if (!(key in newConfig)) {
+          delete appConfig[key]
+        }
+      }
+    }
+  }
+
+  // Vite
+  if (import.meta.hot) {
+    import.meta.hot.accept((newModule) => {
+      const newConfig = newModule?._appConfig
+      applyHMR(newConfig)
+    })
+  }
+
+  // Webpack
+  if (import.meta.webpackHot) {
+    console.log('Register webpackHot')
+    import.meta.webpackHot.accept('#build/app.config.mjs', () => {
+      applyHMR(__appConfig)
+    })
+  }
+}

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

@@ -127,6 +127,15 @@ export const schemaTemplate = {
           allowExtraKeys: false,
           indentation: 2
         }),
+      generateTypes(resolveSchema(Object.fromEntries(Object.entries(nuxt.options.appConfig))),
+        {
+          interfaceName: 'AppConfig',
+          addExport: false,
+          addDefaults: false,
+          allowExtraKeys: true,
+          indentation: 2,
+          partial: true
+        }),
       generateTypes(resolveSchema(nuxt.options.runtimeConfig.public),
         {
           interfaceName: 'PublicRuntimeConfig',
@@ -176,6 +185,21 @@ export const useRuntimeConfig = () => window?.__NUXT__?.config || {}
 `
 }
 
+export const appConfigTemplate: NuxtTemplate = {
+  filename: 'app.config.mjs',
+  write: true,
+  getContents: ({ app, nuxt }) => {
+    return `
+import defu from 'defu'
+
+const inlineConfig = ${JSON.stringify(nuxt.options.appConfig, null, 2)}
+
+${app.configs.map((id, index) => `import ${`cfg${index}`} from ${JSON.stringify(id)}`).join('\n')}
+export default defu(${['{}'].concat(app.configs.map((_id, index) => `cfg${index}`)).concat(['inlineConfig']).join(', ')})
+`
+  }
+}
+
 export const publicPathTemplate: NuxtTemplate = {
   filename: 'paths.mjs',
   getContents ({ nuxt }) {

packages/schema/src/config/_common.ts

@@ -747,5 +747,16 @@ export default {
    * @version 3
    * @deprecated Use `runtimeConfig` option with `public` key (`runtimeConfig.public.*`)
    */
-  publicRuntimeConfig: {}
+  publicRuntimeConfig: {},
+
+  /**
+   * Additional app configuration
+   *
+   * For programmatic usage and type support, you can directly provide app config with this option.
+   * It will be merged with all `app.config` files as default value.
+   *
+   * @type {typeof import('../src/types/config').AppConfig}
+   * @version 3
+   */
+   appConfig: {},
 }

packages/schema/src/types/config.ts

@@ -17,6 +17,17 @@ export interface NuxtOptions extends ConfigSchema {
   _layers: ResolvedConfig<NuxtConfig>[]
 }
 
+export interface ViteConfig extends ViteUserConfig {
+  /**
+   * Options passed to @vitejs/plugin-vue
+   * @see https://github.com/vitejs/vite/tree/main/packages/plugin-vue
+   */
+  vue?: VuePluginOptions
+}
+
+
+// -- Runtime Config --
+
 type RuntimeConfigNamespace = Record<string, any>
 
 export interface PublicRuntimeConfig extends RuntimeConfigNamespace { }
@@ -29,10 +40,17 @@ export interface RuntimeConfig extends PrivateRuntimeConfig, RuntimeConfigNamesp
   public: PublicRuntimeConfig
 }
 
-export interface ViteConfig extends ViteUserConfig {
-  /**
-   * Options passed to @vitejs/plugin-vue
-   * @see https://github.com/vitejs/vite/tree/main/packages/plugin-vue
-   */
-  vue?: VuePluginOptions
+// -- App Config --
+
+// Reserved namespaces to avoid breaking changes if Nuxt starts to use them
+// type ReservedAppConfigKeys =
+//   'baseURL' | 'buildAssetsDir' | 'cdnURL' |
+//   'public' | 'private' | 'app'| 'config' | 'head' |
+//   'nuxt' | 'nitro' | 'internal' | 'runtime'
+
+type AppConfigNamespace = Record<string, any> // & Partial<Record<ReservedAppConfigKeys, never>>
+
+export interface AppConfig extends AppConfigNamespace {
+  theme?: Record<string, any>
 }
+

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,13 @@
+// import { defineAppConfig } from '#imports'
+import type { AppConfig } from '@nuxt/schema'
+
+const defineAppConfig = (config: AppConfig) => config
+
+export default defineAppConfig({
+  custom: '123',
+  nested: {
+    foo: {
+      bar: 'fdfdf'
+    }
+  }
+})

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>
 

playground/nuxt.config.ts

@@ -1,4 +1,8 @@
 import { defineNuxtConfig } from 'nuxt'
 
 export default defineNuxtConfig({
+  appConfig: {
+    custom: '123',
+    nested: { foo: { bar: 'baz' } }
+  }
 })

yarn.lock

@@ -377,6 +377,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/standalone@npm:^7.18.11":
+  version: 7.18.11
+  resolution: "@babel/standalone@npm:7.18.11"
+  checksum: 8a1c8e527c41ba7e2b6c80f7eb4e84cf82fd8697c38416fac548cb5442a83bae9eaf3c2bbcdc398d4149df54d4f1020f31337d784ede634fa1f3de1a6b5fad7c
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.0.0, @babel/template@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/template@npm:7.18.6"
@@ -1737,7 +1744,7 @@ __metadata:
     unbuild: latest
     unctx: ^2.0.0
     unimport: ^0.6.5
-    untyped: ^0.4.4
+    untyped: ^0.4.5
   languageName: unknown
   linkType: soft
 
@@ -9982,7 +9989,7 @@ __metadata:
     unenv: ^0.5.2
     unimport: ^0.6.5
     unplugin: ^0.8.1
-    untyped: ^0.4.4
+    untyped: ^0.4.5
     vue: ^3.2.37
     vue-bundle-renderer: ^0.3.9
     vue-meta: next
@@ -13222,6 +13229,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"untyped@npm:^0.4.5":
+  version: 0.4.5
+  resolution: "untyped@npm:0.4.5"
+  dependencies:
+    "@babel/core": ^7.18.10
+    "@babel/standalone": ^7.18.11
+    "@babel/types": ^7.18.10
+    scule: ^0.3.2
+  checksum: fd09347048145a3f87dbbd03174a3053e5a01b0e174c49bca23e6acddb2dd234a024795033d2c0d72fe8dbded3f8c56fb54580fcee893703f380e15095ddd3e2
+  languageName: node
+  linkType: hard
+
 "upath@npm:^2.0.1":
   version: 2.0.1
   resolution: "upath@npm:2.0.1"