Nuxt/docs/3.api/2.components/2.nuxt-page.md

title	description
<NuxtPage>	The NuxtPage component is required to display pages located in the pages/ directory.

<NuxtPage>

<NuxtPage> is a built-in component that comes with Nuxt. NuxtPage is required to display top-level or nested pages located in the pages/ directory.

NuxtPage is a wrapper around <RouterView> 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.

<!-- static key -->
<NuxtPage page-key="static" />

You can also use a dynamic key based on the current route. (Don't use $route object here as it can cause problems with how <NuxtPage> renders pages with <Suspense>.)

<NuxtPage :page-key="route => route.fullPath" />

Alternatively, pageKey can be passed as a key value via definePageMeta from the <script> section of your Vue component in the /pages directory.

<script setup lang="ts">
definePageMeta({
  key: route => route.fullPath
})
</script>

:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/examples/tree/main/routing/pages?file=app.vue" blank}

Accessing a page's component ref

To get the ref of a page component, access it through ref.value.pageRef

<script setup lang="ts">
const page = ref()
function logFoo () {
  page.value.pageRef.foo()
}
</script>

<template>
  <NuxtPage ref="page" />
</template>

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.

<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>.

::ReadMore{link="/docs/guide/directory-structure/app"} ::