Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

docs: updated nuxt bridge migration guide #7775

Merged
merged 7 commits into from Sep 26, 2022
Merged
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
30 changes: 30 additions & 0 deletions docs/content/bridge/1.overview.md
Expand Up @@ -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 configs differently than Nuxt 2, using a new combined `runtimeConfig` option.
danielroe marked this conversation as resolved.
Show resolved Hide resolved

danielroe marked this conversation as resolved.
Show resolved Hide resolved
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'
+ }
+ }
```

danielroe marked this conversation as resolved.
Show resolved Hide resolved
This also means that when you need to access public runtime config, it's behind a property called `public`. If you use public runtime configs, you'll need to update your code.
danielroe marked this conversation as resolved.
Show resolved Hide resolved

```diff
// MyWidget.vue
- <div>Foo: {{ $config.foo }}</div>
+ <div>Foo: {{ $config.public.foo }}</div>
danielroe marked this conversation as resolved.
Show resolved Hide resolved
```

## 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).
Expand Down