<NuxtPage>
The <NuxtPage> component is required to display pages located in the pages/ directory.
<NuxtPage> is a built-in component that comes with Nuxt. It lets you display top-level or nested pages located in the pages/ directory.
<NuxtPage> is a wrapper around <RouterView> component from Vue Router. It accepts same
name and route props.<NuxtPage> should be used instead of <RouterView> as the former takes additional care on internal states. Otherwise, useRoute() may return incorrect paths.Props
name: tellsRouterViewto render the component with the corresponding name in the matched route record's components option.- type:
string
- type:
route: route location that has all of its components resolved.- type:
RouteLocationNormalized
- type:
pageKey: control when theNuxtPagecomponent is re-rendered.- type:
stringorfunction
- type:
transition: define global transitions for all pages rendered with theNuxtPagecomponent.- type:
booleanorTransitionProps
- type:
keepalive: control state preservation of pages rendered with theNuxtPagecomponent.- type:
booleanorKeepAliveProps
- type:
name and route by scanning and rendering all Vue component files found in the /pages directory.Example
For example, passing static key, NuxtPage component is rendered only once when it is mounted.
<template>
<NuxtPage page-key="static" />
</template>
You can also use a dynamic key based on the current route:
<NuxtPage :page-key="route => route.fullPath" />
$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 from the <script> section of your Vue component in the /pages directory.
<script setup lang="ts">
definePageMeta({
key: route => route.fullPath
})
</script>
Page's 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>
<script setup lang="ts">
const foo = () => {
console.log('foo method called')
}
defineExpose({
foo,
})
</script>
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>.