docs: mention use case for <KeepAlive> in definePageMeta (#8491)

This commit is contained in:
Dawid Stefanko 2022-10-26 12:50:40 +02:00 committed by GitHub
parent d228b11c04
commit 5bc8c10a3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -268,7 +268,9 @@ Of course, you are welcome to define metadata for your own use throughout your a
#### `keepalive` #### `keepalive`
Nuxt will automatically wrap your page in [the Vue `<KeepAlive>` component](https://vuejs.org/guide/built-ins/keep-alive.html#keepalive) if you set `keepalive: true` in your `definePageMeta`. This might be useful to do, for example, in a parent route that has dynamic child routes, if you want to preserve page state across route changes. You can also set props to be passed to `<KeepAlive>` (see a full list [here](https://vuejs.org/api/built-in-components.html#keepalive)). Nuxt will automatically wrap your page in [the Vue `<KeepAlive>` component](https://vuejs.org/guide/built-ins/keep-alive.html#keepalive) if you set `keepalive: true` in your `definePageMeta`. This might be useful to do, for example, in a parent route that has dynamic child routes, if you want to preserve page state across route changes.
When your goal is to preserve state for parent routes use this syntax: `<NuxtPage keepalive />`. You can also set props to be passed to `<KeepAlive>` (see a full list [here](https://vuejs.org/api/built-in-components.html#keepalive)).
You can set a default value for this property [in your `nuxt.config`](/api/configuration/nuxt-config#keepalive). You can set a default value for this property [in your `nuxt.config`](/api/configuration/nuxt-config#keepalive).