feat: introduce simplified runtimeConfig option (#4254)

packages/bridge/src/nitro.ts

@@ -26,9 +26,20 @@ export async function setupNitroBridge () {
   nuxt.options.app.assetsPath = nuxt.options.app.buildAssetsDir
   nuxt.options.app.baseURL = nuxt.options.app.baseURL || (nuxt.options.app as any).basePath
   nuxt.options.app.cdnURL = nuxt.options.app.cdnURL || ''
-  // Nitro expects app config on `config.app` rather than `config._app`
+
-  nuxt.options.publicRuntimeConfig.app = nuxt.options.publicRuntimeConfig.app || {}
+  // Extract publicConfig and app
-  Object.assign(nuxt.options.publicRuntimeConfig.app, nuxt.options.publicRuntimeConfig._app)
+  const publicConfig = nuxt.options.publicRuntimeConfig
+  const appConfig = { ...publicConfig._app, ...publicConfig.app }
+  delete publicConfig.app
+  delete publicConfig._app
+
+  // Merge with new `runtimeConfig` format
+  nuxt.options.runtimeConfig = defu(nuxt.options.runtimeConfig, {
+    ...publicConfig,
+    ...nuxt.options.privateRuntimeConfig,
+    public: publicConfig,
+    app: appConfig
+  })
 
   // Disable loading-screen
   // @ts-ignore
@@ -59,14 +70,10 @@ export async function setupNitroBridge () {
     handlers: [],
     devHandlers: [],
     runtimeConfig: {
-      // Private
+      ...nuxt.options.runtimeConfig,
-      ...nuxt.options.publicRuntimeConfig,
-      ...nuxt.options.privateRuntimeConfig,
-      // Public
-      public: nuxt.options.publicRuntimeConfig,
-      // Nitro
       nitro: {
-        envPrefix: 'NUXT_'
+        envPrefix: 'NUXT_',
+        ...nuxt.options.runtimeConfig.nitro
       }
     },
     typescript: {

packages/nuxt3/src/core/nitro.ts

@@ -27,17 +27,10 @@ export async function initNitro (nuxt: Nuxt) {
     devHandlers: [],
     baseURL: nuxt.options.app.baseURL,
     runtimeConfig: {
-      // Private
+      ...nuxt.options.runtimeConfig,
-      ...nuxt.options.publicRuntimeConfig,
-      ...nuxt.options.privateRuntimeConfig,
-      // Public
-      public: {
-        ...nuxt.options.publicRuntimeConfig,
-        app: undefined // avoid dupicate
-      },
-      // Nitro
       nitro: {
-        envPrefix: 'NUXT_'
+        envPrefix: 'NUXT_',
+        ...nuxt.options.runtimeConfig.nitro
       }
     },
     typescript: {

packages/nuxt3/src/core/templates.ts

@@ -134,22 +134,14 @@ export const schemaTemplate = {
       `    [${genString(meta.configKey)}]?: typeof ${genDynamicImport(meta.importName, { wrapper: false })}.default extends NuxtModule<infer O> ? Partial<O> : Record<string, any>`
       ),
       '  }',
-      generateTypes(resolveSchema(nuxt.options.publicRuntimeConfig),
+      generateTypes(resolveSchema(nuxt.options.runtimeConfig),
         {
-          interfaceName: 'PublicRuntimeConfig',
+          interfaceName: 'RuntimeConfig',
           addExport: false,
           addDefaults: false,
           allowExtraKeys: false,
           indentation: 2
         }),
-      generateTypes(resolveSchema(nuxt.options.privateRuntimeConfig), {
-        interfaceName: 'PrivateRuntimeConfig',
-        addExport: false,
-        addDefaults: false,
-        indentation: 2,
-        allowExtraKeys: false,
-        defaultDescrption: 'This value is only accessible from server-side.'
-      }),
       '}'
     ].join('\n')
   }

packages/schema/src/config/_common.ts

@@ -4,6 +4,7 @@ import createRequire from 'create-require'
 import { pascalCase } from 'scule'
 import jiti from 'jiti'
 import defu from 'defu'
+import { RuntimeConfig } from '../types/config'
 
 export default {
   /**
@@ -695,63 +696,56 @@ export default {
   /**
    * Runtime config allows passing dynamic config and environment variables to the Nuxt app context.
    *
-   * The value of this object is accessible from server only using `$config` or `useRuntimeConfig`.
+   * The value of this object is accessible from server only using `useRuntimeConfig`.
-   * It will override `publicRuntimeConfig` on the server-side.
    *
-   * It should hold _private_ environment variables (that should not be exposed on the frontend).
+   * It mainly should hold _private_ configuration which is not exposed on the frontend.
    * This could include a reference to your API secret tokens.
    *
+   * Anything under `public` and `app` will be exposed to the frontend as well.
+   *
    * Values are automatically replaced by matching env variables at runtime, e.g. setting an environment
-   * variable `API_SECRET=my-api-key` would overwrite the value in the example below.
+   * variable `API_KEY=my-api-key PUBLIC_BASE_URL=/foo/` would overwrite the two values in the example below.
-   * Note that the env variable has to be named exactly the same as the config key.
    *
    * @example
    * ```js
    * export default {
-   *   privateRuntimeConfig: {
+   *  runtimeConfig: {
-   *     API_SECRET: '' // Default to an empty string, automatically loaded at runtime using process.env.API_SECRET
+   *     apiKey: '' // Default to an empty string, automatically loaded at runtime using process.env.NUXT_API_SECRET
+   *     public: {
+   *        baseURL: '' // Exposed to the frontend as well.
+   *     }
    *   }
    * }
    * ```
-   * @type {typeof import('../src/types/config').PrivateRuntimeConfig}
+   * @type {typeof import('../src/types/config').RuntimeConfig}
-   * @version 2
    * @version 3
    */
-  privateRuntimeConfig: {},
+  runtimeConfig: {
-
+    $resolve: (val: RuntimeConfig, get) => defu(val, {
-  /**
+      ...get('publicRuntimeConfig'),
-   * Runtime config allows passing dynamic config and environment variables to the Nuxt app context.
+      ...get('privateRuntimeConfig'),
-   *
+      public: get('publicRuntimeConfig'),
-   * The value of this object is accessible from both client and server using `$config` or `useRuntimeConfig`.
-   *
-   * It should hold env variables that are _public_ as they will be accessible on the frontend. This could include a
-   * reference to your public URL.
-   *
-   * Values are automatically replaced by matching env variables at runtime, e.g. setting an environment
-   * variable `BASE_URL=https://some-other-url.org` would overwrite the value in the example below.
-   * Note that the env variable has to be named exactly the same as the config key.
-   *
-   * @example
-   * ```js
-   * export default {
-   *   publicRuntimeConfig: {
-   *     BASE_URL: 'https://nuxtjs.org'
-   *   }
-   * }
-   * ```
-   * @type {typeof import('../src/types/config').PublicRuntimeConfig}
-   * @version 2
-   * @version 3
-   */
-  publicRuntimeConfig: {
-    $resolve: (val: Record<string, any> = {}, get) => ({
-      ...val,
       app: {
         baseURL: get('app.baseURL'),
         buildAssetsDir: get('app.buildAssetsDir'),
         cdnURL: get('app.cdnURL'),
-        ...val.app || {},
       }
     })
-  }
+  },
+
+  /**
+   * @type {typeof import('../src/types/config').PrivateRuntimeConfig}
+   * @version 2
+   * @version 3
+   * @deprecated Use `runtimeConfig` option
+   */
+  privateRuntimeConfig: {},
+
+  /**
+   * @type {typeof import('../src/types/config').PublicRuntimeConfig}
+   * @version 2
+   * @version 3
+   * @deprecated Use `runtimeConfig` option with `public` key (`runtimeConfig.public.*`)
+   */
+  publicRuntimeConfig: {}
 }

packages/schema/src/types/config.ts

@@ -13,10 +13,17 @@ export interface NuxtOptions extends ConfigSchema {
   _layers: ResolvedConfig<NuxtConfig>[]
 }
 
-export interface PublicRuntimeConfig extends Record<string, any> { }
+type RuntimeConfigNamespace = Record<string, any>
+
+/** @deprecated use RuntimeConfig interface */
+export interface PublicRuntimeConfig extends RuntimeConfigNamespace { }
+
+/** @deprecated use RuntimeConfig interface */
 export interface PrivateRuntimeConfig extends PublicRuntimeConfig { }
 
-type _RuntimeConfig = PublicRuntimeConfig & Partial<PrivateRuntimeConfig>
+type LegacyRuntimeConfig = PublicRuntimeConfig & Partial<PrivateRuntimeConfig>
-export interface RuntimeConfig extends _RuntimeConfig {
+
-  [key: string]: any
+export interface RuntimeConfig extends LegacyRuntimeConfig, RuntimeConfigNamespace {
+  app: RuntimeConfigNamespace
+  public: RuntimeConfigNamespace
 }