docs: update runtimeConfig section (#4279)

docs/content/2.guide/2.features/10.runtime-config.md

@@ -4,22 +4,22 @@ Nuxt provides an API to define the runtime config within your application and AP
 
 ## Exposing runtime config
 
-To expose config and environment variables to the rest of your app, you will need to define runtime configuration in your `nuxt.config` file, using either the [`privateRuntimeConfig` or `publicRuntimeConfig` options](/guide/directory-structure/nuxt.config#privateruntimeconfig) (based on whether you want it to be accessible on the client-side part of your app or not).
+To expose config and environment variables to the rest of your app, you will need to define runtime configuration in your `nuxt.config` file, using either the [`runtimeConfig` options](/guide/directory-structure/nuxt.config#runtimeconfig) (based on whether you want it to be accessible on the client-side part of your app or not).
 
 **Example:**
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
-  publicRuntimeConfig: {
+  runtimeConfig: {
-    API_BASE: '/api'
+    API_SECRET: '123', // the private keys which should not be exposed to public
+    public: {
+      API_BASE: '/api',
+    }
   },
-  privateRuntimeConfig: {
-    API_SECRET: '123'
-  }
 })
 ```
 
-When adding `API_BASE` to the `publicRuntimeConfig`, Nuxt adds it to the pages' payload. This way we can universally access `API_BASE` in both server and browser.
+When adding `API_BASE` to the `runtimeConfig.public`, Nuxt adds it to the pages' payload. This way we can universally access `API_BASE` in both server and browser.
 
 ### Environment Variables
 
@@ -37,12 +37,12 @@ API_SECRET=api_secret_token
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
-  publicRuntimeConfig: {
+  runtimeConfig: {
-    BASE_URL: process.env.BASE_URL
+    API_SECRET: process.env.API_SECRET,
+    public: {
+      BASE_URL: process.env.BASE_URL,
+    }
   },
-  privateRuntimeConfig: {
-    API_SECRET: process.env.API_SECRET
-  }
 })
 ```
 
@@ -56,8 +56,8 @@ Within the Vue part of your Nuxt app, you will need to call `useRuntimeConfig()`
 
 **Note:** Behavior is different between client side and server side:
 
-- On client side, only `publicRuntimeConfig` is available and the object is both writable and reactive.
+- On client side, only `runtimeConfig.public` is available and the object is both writable and reactive.
-- On server side, both `publicRuntimeConfig` and `privateRuntimeConfig` are merged and the object is read-only to avoid context sharing.
+- On server side, both `runtimeConfig.public` and `runtimeConfig` are merged and the object is read-only to avoid context sharing.
 
 ```vue
 <template>
@@ -71,7 +71,7 @@ const config = useRuntimeConfig()
 </script>
 ```
 
-**🛑 Security note:** Never use example above if `API_AUTH_TOKEN` is a private config. Even if you use `privateRuntimeConfig`, you still have to be careful that you do not expose such config to either payload or html!
+**🛑 Security note:** Never use example above if `API_AUTH_TOKEN` is a private config. Even if you use `runtimeConfig`, you still have to be careful that you do not expose such config to either payload or html!
 
 ::alert{icon=👉}
 **`useRuntimeConfig` only works during `setup` or `Lifecycle Hooks`**.
@@ -79,7 +79,7 @@ const config = useRuntimeConfig()
 
 ### Plugins
 
-If you want to use the runtime confg within any (custom) plugin, you can use `useRuntimeConfig()` inside of your `defineNuxtPlugin` function.
+If you want to use the runtime config within any (custom) plugin, you can use `useRuntimeConfig()` inside of your `defineNuxtPlugin` function.
 
 For example:
 
@@ -118,11 +118,10 @@ Currently it is possible to manually type your runtime config.
 
 ```ts [index.d.ts]
 declare module '@nuxt/schema' {
-  interface PublicRuntimeConfig {
+  interface runtimeConfig {
-    testConfig: string
+    public: {
-  }
+      testConfig: string
-  interface PrivateRuntimeConfig {
+    }
-    token: string
   }
 }
 // It is always important to ensure you import/export something when augmenting a type

docs/content/migration/8.runtime-config.md

@@ -24,18 +24,18 @@ When referencing these variables within your components, you will have to use th
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
-  publicRuntimeConfig: {
+  runtimeConfig: {
-    BASE_URL: process.env.BASE_URL || 'https://nuxtjs.org'
+    secretKey: '', // variables that can only be accessed on server-side
-  },
+    public: {
-  privateRuntimeConfig: {
+      BASE_URL: process.env.BASE_URL || 'https://nuxtjs.org'
-    // variables that can only be accessed on server-side
+    }
   },
 })
 ```
 
 ```vue [pages/index.vue]
 <script setup>
-  const config = useRuntimeConfig()
+  const config = useRuntimeConfig().public
   // instead of process.env.BASE_URL you will now access config.BASE_URL
 </script>
 ```
@@ -43,7 +43,7 @@ export default defineNuxtConfig({
 ```ts [server/api/hello.ts]
 import { useRuntimeConfig } from '#nitro';
 
-const config = useRuntimeConfig()
+const config = useRuntimeConfig().public
 
 export default (req, res) => {
   // you can now access config.BASE_URL