description: The <NuxtPage> component is required to display pages located in the pages/ directory.
links:
- label: Source
icon: i-simple-icons-github
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/pages/runtime/page.ts
size: xs
---
`<NuxtPage>` is a built-in component that comes with Nuxt. It lets you display top-level or nested pages located in the [`pages/`](/docs/guide/directory-structure/pages) directory.
`<NuxtPage>` is a wrapper around [`<RouterView>`](https://router.vuejs.org/api/interfaces/RouterViewProps.html#interface-routerviewprops) component from Vue Router. :br
`<NuxtPage>` should be used instead of `<RouterView>` as the former takes additional care on internal states. Otherwise, `useRoute()` may return incorrect paths.
Don't use `$route` object here as it can cause problems with how `<NuxtPage>` renders pages with `<Suspense>`.
::
Alternatively, `pageKey` can be passed as a `key` value via [`definePageMeta`](/docs/api/utils/define-page-meta) from the `<script>` section of your Vue component in the `/pages` directory.
```vue [pages/my-page.vue]
<scriptsetuplang="ts">
definePageMeta({
key: route => route.fullPath
})
</script>
```
:link-example{to="/docs/examples/routing/pages"}
## Page's Ref
To get the `ref` of a page component, access it through `ref.value.pageRef`
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 the above example, the value of `foobar`will be available using `$attrs.foobar` in the template or `useAttrs().foobar` in `<script setup>`.