nuxt · pi0 · Jun 27, 2022 · Jun 24, 2022 · Jun 25, 2022 · Jun 25, 2022
diff --git 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>`
 
-::ReadMore{link="/guide/directory-structure/app"}
-::
+ `<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.
 
-::NeedContribution
+## 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"}
 ::