Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-21 21:25:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: add section on 'updateAppConfig' in the 'app.config' page (#29397)

Browse Source
This commit is contained in:
Dawit 2024-10-12 16:31:58 -04:00 committed by GitHub
parent bb6b6e254d
commit ea1574ae1a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
docs/2.guide/2.directory-structure/3.app-config.md
View File

@ -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