`<NuxtPage>`

Renders the page component matching the current route (router view).

Since Nuxt 3.0 Spec ↗

Syntax

<NuxtPage />

Parameters

Name	Type	Required	Description
`pageKey`	`string \| (route) => string`	No	Forces re-render when the key changes (e.g. to remount on param change).
`transition`	`boolean \| TransitionProps`	No	Page transition configuration.

Returns

Component — Displays the active route page; also renders nested routes.

Examples

<!-- app.vue -->
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<!-- pages/users/[id].vue with nested children -->
<template>
  <div>
    <UserHeader />
    <NuxtPage />
  </div>
</template>

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

Notes

Required to display the `pages/` directory routing. It is also the nested router view: place another `<NuxtPage>` inside a parent route component to render child routes. Use `pageKey` to control remounting when only route params change.