From 721ed7d6deaaedad992b77c694d6720faac4df68 Mon Sep 17 00:00:00 2001
From: Dawit <27751688+oneminch@users.noreply.github.com>
Date: Sat, 12 Oct 2024 16:31:58 -0400
Subject: [PATCH] docs: add section on 'updateAppConfig' in the 'app.config'
 page (#29397)

---
 .../2.directory-structure/3.app-config.md     | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/docs/2.guide/2.directory-structure/3.app-config.md b/docs/2.guide/2.directory-structure/3.app-config.md
index 656d5c16a1..d170a6ce5a 100644
--- a/docs/2.guide/2.directory-structure/3.app-config.md
+++ b/docs/2.guide/2.directory-structure/3.app-config.md
@@ -19,6 +19,10 @@ export default defineAppConfig({
 Do not put any secret values inside `app.config` file. It is exposed to the user client bundle.
 ::
 
+::note
+When configuring a custom [`srcDir`](/docs/api/nuxt-config#srcdir), make sure to place the `app.config` file at the root of the new `srcDir` path.
+::
+
 ## Usage
 
 To expose config and environment variables to the rest of your app, you will need to define configuration in `app.config` file.
@@ -31,7 +35,7 @@ export default defineAppConfig({
 })
 ```
 
-When adding `theme` to the `app.config`, Nuxt uses Vite or webpack to bundle the code. We can universally access `theme` both when server-rendering the page and in the browser using [`useAppConfig`](/docs/api/composables/use-app-config) composable.
+We can now universally access `theme` both when server-rendering the page and in the browser using [`useAppConfig`](/docs/api/composables/use-app-config) composable.
 
 ```vue [pages/index.vue]
 <script setup lang="ts">
@@ -41,7 +45,23 @@ console.log(appConfig.theme)
 </script>
 ```
 
-When configuring a custom [`srcDir`](/docs/api/nuxt-config#srcdir), make sure to place the `app.config` file at the root of the new `srcDir` path.
+The [`updateAppConfig`](/docs/api/utils/update-app-config) utility can be used to update the `app.config` at runtime.
+
+```vue [pages/index.vue]
+<script setup>
+const appConfig = useAppConfig() // { foo: 'bar' }
+
+const newAppConfig = { foo: 'baz' }
+
+updateAppConfig(newAppConfig)
+
+console.log(appConfig) // { foo: 'baz' }
+</script>
+```
+
+::read-more{to="/docs/api/utils/update-app-config"}
+Read more about the `updateAppConfig` utility.
+::
 
 ## Typing App Config