mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-29 09:02:03 +00:00
docs: updated nuxt bridge migration guide (#7775)
Co-authored-by: Sébastien Chopin <seb@nuxtjs.com> Co-authored-by: Daniel Roe <daniel@roe.dev>
This commit is contained in:
parent
9a11d24eb9
commit
198576a741
@ -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.
|
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
|
||||||
|
- <div>Website: {{ $config.websiteURL }}</div>
|
||||||
|
+ <div>Website: {{ $config.public.websiteURL }}</div>
|
||||||
|
```
|
||||||
|
|
||||||
## Migrate Composition API
|
## 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).
|
If you were using `@vue/composition-api` or `@nuxtjs/composition-api`, please read the [composition api migration guide](/bridge/bridge-composition-api).
|
||||||
|
Loading…
Reference in New Issue
Block a user