# > The component is required to display pages located in the pages/ directory. `` is a built-in component that comes with Nuxt. It lets you display top-level or nested pages located in the [`app/pages/`](/docs/4.x/directory-structure/app/pages) directory. `` is a wrapper around [``](https://router.vuejs.org/api/interfaces/routerviewprops) from Vue Router. It should be used instead of `` because the former takes additional care of internal states. Otherwise, `useRoute()` may return incorrect paths. `` includes the following components: ```vue ``` By default, Nuxt does not enable `` and ``. You can enable them in the nuxt.config file or by setting the `transition` and `keepalive` properties on ``. If you want to define a specific page, you can set it in `definePageMeta` in the page component. If you enable `` in your page component, ensure that the page has a single root element. Since `` uses `` under the hood, the component lifecycle behavior during page changes differs from that of a typical Vue application. In a typical Vue application, a new page component is mounted **only after** the previous one has been fully unmounted. However, in Nuxt, due to how Vue `` is implemented, the new page component is mounted **before** the previous one is unmounted. ## Props - `name`: tells `` to render the component with the corresponding name in the matched route record's components option. - type: `string` - `route`: route location that has all of its components resolved. - type: `RouteLocationNormalized` - `pageKey`: control when the `NuxtPage` component is re-rendered. - type: `string` or `function` - `transition`: define global transitions for all pages rendered with the `NuxtPage` component. - type: `boolean` or [`TransitionProps`](https://vuejs.org/api/built-in-components#transition) - `keepalive`: control state preservation of pages rendered with the `NuxtPage` component. - type: `boolean` or [`KeepAliveProps`](https://vuejs.org/api/built-in-components#keepalive) Nuxt automatically resolves the `name` and `route` by scanning and rendering all Vue component files found in the `/pages` directory. ## Example For example, if you pass a key that never changes, the `` component will be rendered only once - when it is first mounted. ```vue [app/app.vue] ``` You can also use a dynamic key based on the current route: ```html ``` Don't use `$route` object here as it can cause problems with how `` renders pages with ``. Alternatively, `pageKey` can be passed as a `key` value via [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) from the ` ``` ## Page's Ref To get the `ref` of a page component, access it through `ref.value.pageRef` ```vue [app/app.vue] ``` ```vue [my-page.vue] ``` ## Custom Props `` also accepts custom props that you may need to pass further down the hierarchy. For example, in the below example, the value of `foobar` will be passed to the `NuxtPage` component and then to the page components. ```vue [app/app.vue] ``` We can access the `foobar` prop in the page component: ```vue [app/pages/page.vue] ``` --- - [Source](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/pages/runtime/page.ts)