From 66279aab8b54017e93af6aac4ba31413200780fd Mon Sep 17 00:00:00 2001
From: Krutie Patel <krutie.patel@gmail.com>
Date: Mon, 27 Jun 2022 22:14:52 +1000
Subject: [PATCH] docs(api): add docs for `<NuxtPage>` component (#5591)

---
 .../content/3.api/2.components/1.nuxt-page.md | 54 +++++++++++++++++--
 1 file changed, 51 insertions(+), 3 deletions(-)

diff --git a/docs/content/3.api/2.components/1.nuxt-page.md b/docs/content/3.api/2.components/1.nuxt-page.md
index c37c558e22..a74517c7bb 100644
--- a/docs/content/3.api/2.components/1.nuxt-page.md
+++ b/docs/content/3.api/2.components/1.nuxt-page.md
@@ -1,7 +1,55 @@
 # `<NuxtPage>`
 
+ `<NuxtPage>` is a built-in component that comes with Nuxt. `NuxtPage` component is required to display top-level or nested pages located in the `/pages` directory.
+
+`NuxtPage` is a wrapper around [`<RouterView>`](https://router.vuejs.org/api/#router-view-props) component from Vue Router. `NuxtPage` component accepts same `name` and `route` props. 
+
+- **name:** type: `string`
+
+`name` helps `RouterView` render the component with the corresponding name in the matched route record's components option.
+
+- **route:** type: `RouteLocationNormalized`
+
+`route` is a route location that has all of its components resolved.
+
+> **Nuxt automatically resolves the `name` and `route` by scanning and rendering all Vue component files found in the `/pages` directory.**
+
+Apart from the `name` and `route`, `NuxtPage` component also accepts `pageKey` props.
+
+- **pageKey:** type: `string` or `function`
+
+`pageKey` helps control when the `NuxtPage` component is re-rendered.
+
+## Example 
+
+For example, passing `static` key, `NuxtPage` component is rendered only once when it is mounted.
+
+```html
+<!-- static key -->
+<NuxtPage page-key=“static” />
+```
+
+Alternatively, `pageKey` can be passed as a `key` value via `definePageMeta` from the `<script>` section of your Vue component in the `/pages` directory.
+
+```js
+<script setup>
+definePageMeta({
+  key: route => route.fullPath
+})
+</script>
+```
+
+:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/framework/tree/main/examples/routing/pages?file=app.vue" blank}
+
+## Custom props
+
+In addition, `NuxtPage` also accepts custom props that you may need to pass further down the hierarchy. These custom props are accessible via `attrs` in the Nuxt app.
+
+```html
+<NuxtPage :foobar=“123” />
+```
+
+For example, in above example, value of `foobar` will be available using `attrs.foobar`.
+
 ::ReadMore{link="/guide/directory-structure/app"}
 ::
-
-::NeedContribution
-::