From 9d07bb6bade4f36d8c811ef464832d3ad4dd4cb4 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Fri, 19 Aug 2022 11:22:02 +0200 Subject: [PATCH 1/4] feat(nuxt): allow `useAppConfig` with specific key --- packages/nuxt/src/app/config.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/nuxt/src/app/config.ts b/packages/nuxt/src/app/config.ts index d8f97df8174..7150e543b98 100644 --- a/packages/nuxt/src/app/config.ts +++ b/packages/nuxt/src/app/config.ts @@ -1,5 +1,5 @@ import type { AppConfig } from '@nuxt/schema' -import { reactive } from 'vue' +import { reactive, computed } from 'vue' import { useNuxtApp } from './nuxt' // @ts-ignore import __appConfig from '#build/app.config.mjs' @@ -7,11 +7,14 @@ import __appConfig from '#build/app.config.mjs' // Workaround for vite HMR with virtual modules export const _getAppConfig = () => __appConfig as AppConfig -export function useAppConfig (): AppConfig { +export function useAppConfig (key?: string): AppConfig { const nuxtApp = useNuxtApp() if (!nuxtApp._appConfig) { nuxtApp._appConfig = reactive(__appConfig) as AppConfig } + if (key) { + return computed(() => nuxtApp._appConfig[key]) + } return nuxtApp._appConfig } From e6e743a60358c21be60649a991ad8a9982007dba Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Fri, 19 Aug 2022 11:43:45 +0200 Subject: [PATCH 2/4] update docs --- docs/content/2.guide/2.features/10.app-config.md | 16 +++++++++++++++- .../3.api/1.composables/use-app-config.md | 4 +++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/docs/content/2.guide/2.features/10.app-config.md b/docs/content/2.guide/2.features/10.app-config.md index c3544181514..217c4d49175 100644 --- a/docs/content/2.guide/2.features/10.app-config.md +++ b/docs/content/2.guide/2.features/10.app-config.md @@ -23,7 +23,9 @@ export default defineAppConfig({ }) ``` -When adding `theme` to the `app.config`, Nuxt uses Vite or Webpack to bundle the code. We can universally access `theme` in both server and browser using [useAppConfig](/api/composables/use-app-config) composable. +When adding `theme` to the `app.config`, Nuxt uses Vite or Webpack to bundle the code to both Server and client bundles. + +In order to access the runtime config value, we can [useAppConfig](/api/composables/use-app-config) composable. Returned value is a reactive object. ```js const appConfig = useAppConfig() @@ -31,6 +33,18 @@ const appConfig = useAppConfig() console.log(appConfig.theme) ``` +Or if you need to access a sub-key: + +```js +const themeConfig = useAppConfig('theme') + +console.log(themeConfig) +``` + +::alert{type=warning} +Destructuring `appConfig` causes it to loose reactivity. Always use `computed` or provide key to access a sub-key. +:: + ### Manually Typing App Config diff --git a/docs/content/3.api/1.composables/use-app-config.md b/docs/content/3.api/1.composables/use-app-config.md index 72c0dd5033f..ea6c23f7100 100644 --- a/docs/content/3.api/1.composables/use-app-config.md +++ b/docs/content/3.api/1.composables/use-app-config.md @@ -8,9 +8,11 @@ Access [app config](/guide/features/app-config): **Usage:** ```js +// Access whole app config (reactive object) const appConfig = useAppConfig() -console.log(appConfig) +// Access sub key of app-config (still reactive) +const themeConfig = useAppConfig('theme') ``` ::ReadMore{link="/guide/features/app-config"} From ad18dd65f44b99510de69cde4ca054ba370aa177 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Fri, 19 Aug 2022 11:48:22 +0200 Subject: [PATCH 3/4] refactor: chain computed and toRef --- packages/nuxt/src/app/config.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/nuxt/src/app/config.ts b/packages/nuxt/src/app/config.ts index 7150e543b98..a0edbbba964 100644 --- a/packages/nuxt/src/app/config.ts +++ b/packages/nuxt/src/app/config.ts @@ -1,5 +1,5 @@ import type { AppConfig } from '@nuxt/schema' -import { reactive, computed } from 'vue' +import { reactive, toRef } from 'vue' import { useNuxtApp } from './nuxt' // @ts-ignore import __appConfig from '#build/app.config.mjs' @@ -13,7 +13,7 @@ export function useAppConfig (key?: string): AppConfig { nuxtApp._appConfig = reactive(__appConfig) as AppConfig } if (key) { - return computed(() => nuxtApp._appConfig[key]) + return reactive(toRef(nuxtApp._appConfig, key)) } return nuxtApp._appConfig } From 64985405a33e396f9dad5b1ba62121eb450df9ef Mon Sep 17 00:00:00 2001 From: pooya parsa Date: Fri, 19 Aug 2022 11:48:47 +0200 Subject: [PATCH 4/4] Update docs/content/2.guide/2.features/10.app-config.md Co-authored-by: Daniel Roe --- docs/content/2.guide/2.features/10.app-config.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/2.guide/2.features/10.app-config.md b/docs/content/2.guide/2.features/10.app-config.md index 217c4d49175..9d18c2953fc 100644 --- a/docs/content/2.guide/2.features/10.app-config.md +++ b/docs/content/2.guide/2.features/10.app-config.md @@ -42,7 +42,7 @@ console.log(themeConfig) ``` ::alert{type=warning} -Destructuring `appConfig` causes it to loose reactivity. Always use `computed` or provide key to access a sub-key. +Destructuring `appConfig` causes it to lose reactivity. Always use `computed` or provide key to access a sub-key. ::