diff --git a/docs/content/bridge/1.overview.md b/docs/content/bridge/1.overview.md index 62853bd533b..aec21984ba3 100644 --- a/docs/content/bridge/1.overview.md +++ b/docs/content/bridge/1.overview.md @@ -149,6 +149,36 @@ Overwriting options such as `"compilerOptions.paths"` with your own configuratio In case you need to extend options provided by `./.nuxt/tsconfig.json` further, you can use the `alias` property withing your `nuxt.config`. `nuxi` will pick them up and extend `./.nuxt/tsconfig.json` accordingly. :: +## Update Runtime Config + +Nuxt 3 approaches runtime config differently than Nuxt 2, using a new combined `runtimeConfig` option. + +First, you'll need to combine your `publicRuntimeConfig` and `privateRuntimeConfig` properties into a new one called `runtimeConfig`, with the public config within a key called `public`. + +```diff +// nuxt.config.js +- privateRuntimeConfig: { +- apiKey: process.env.NUXT_API_KEY || 'super-secret-key' +- }, +- publicRuntimeConfig: { +- websiteURL: 'https://public-data.com' +- } ++ runtimeConfig: { ++ apiKey: process.env.NUXT_API_KEY || 'super-secret-key', ++ public: { ++ websiteURL: 'https://public-data.com' ++ } ++ } +``` + +This also means that when you need to access public runtime config, it's behind a property called `public`. If you use public runtime config, you'll need to update your code. + +```diff +// MyWidget.vue +-
Website: {{ $config.websiteURL }}
++
Website: {{ $config.public.websiteURL }}
+``` + ## Migrate Composition API If you were using `@vue/composition-api` or `@nuxtjs/composition-api`, please read the [composition api migration guide](/bridge/bridge-composition-api).