components/nuxtpage

22 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

NuxtPage component purpose

The <NuxtPage> component is a built-in component required to display pages located in the app/pages/ directory. It is a wrapper around <RouterView> from Vue Router and should be used instead of <RouterView> because it takes additional care of internal states to ensure useRoute() returns correct paths.

NuxtPage internal structure

The <NuxtPage> component internally includes RouterView, Transition, KeepAlive, Suspense, and renders the component. By default, Nuxt does not enable Transition and KeepAlive; they can be enabled in nuxt.config or by setting transition and keepalive properties on <NuxtPage>, or via definePageMeta in the page component.

NuxtPage transition warning

If you enable <Transition> in your page component, ensure that the page has a single root element.

NuxtPage component lifecycle with Suspense

Because <NuxtPage> uses <Suspense> under the hood, the component lifecycle behavior during page changes differs from a typical Vue application. In Nuxt, the new page component is mounted before the previous one is unmounted, unlike a typical Vue app where the new page is mounted only after the previous one is fully unmounted.

NuxtPage props: name

The name prop tells <RouterView> to render the component with the corresponding name in the matched route record's components option, used with Named Views and the name@view.vue filename convention. Type: string.

NuxtPage props: route

The route prop accepts a route location that has all of its components resolved. Type: RouteLocationNormalized.

NuxtPage props: pageKey

The pageKey prop controls when the <NuxtPage> component is re-rendered. Type: string or function.

NuxtPage props: transition

The transition prop defines global transitions for all pages rendered with the <NuxtPage> component. Type: boolean or TransitionProps.

NuxtPage props: keepalive

The keepalive prop controls state preservation of pages rendered with the <NuxtPage> component. Type: boolean or KeepAliveProps.

NuxtPage static key example

The example shows passing page-key="static" to render the <NuxtPage> component only once when first mounted: <template><NuxtPage page-key="static" /></template>

NuxtPage dynamic key example

The example shows using a dynamic key based on the current route: <NuxtPage :page-key="route => route.fullPath" />

NuxtPage pageKey pitfall

Do not use the $route object in pageKey as it can cause problems with how <NuxtPage> renders pages with <Suspense>.

NuxtPage key via definePageMeta

The pageKey can be passed as a key value via definePageMeta from the script section of a Vue component in the /pages directory: definePageMeta({ key: route => route.fullPath, })

NuxtPage ref access pattern

To get the ref of a page component, access it through ref.value.pageRef. The parent component uses <NuxtPage ref="page" /> and accesses it via page.value.pageRef.

NuxtPage expose methods example

A page component can expose methods using defineExpose: defineExpose({ foo, }) and the parent component accesses them via page.value.pageRef.foo().

NuxtPage custom props passing

<NuxtPage> accepts custom props that can be passed down the hierarchy. For example, <NuxtPage :foobar="123" /> passes the foobar prop to page components.

NuxtPage custom props with defineProps

Page components can access custom props passed to <NuxtPage> using defineProps: defineProps<{ foobar: number }>()

NuxtPage custom props via attrs

If a prop is not defined with defineProps, custom props passed to <NuxtPage> can still be accessed from the page attrs using useAttrs(): const attrs = useAttrs(); console.log(attrs.foobar)

NuxtPage component required with app.vue

If you are using app.vue, you must use the <NuxtPage/> component to display the current page.

Nested routes display with NuxtPage

Nested routes can be displayed using the <NuxtPage> component. When a parent page has child pages, the <NuxtPage> component must be inserted inside the parent page to display the child component. The <NuxtPage> component can also receive props that are passed to child components.

NuxtPage pageKey prop for re-render control

The <NuxtPage> component has a pageKey prop that allows control over when the component is re-rendered. It can accept a string or a function (e.g., route => route.fullPath). This is useful for transitions.

Named views with name@view.vue convention (v4.5+)

A single route can render into multiple <NuxtPage> outlets in a parent component using the name@view.vue filename convention. Create sibling page files for each named view (e.g., child.vue and child@sidebar.vue), then render each outlet by name from the parent using <NuxtPage name="sidebar" />. definePageMeta is read from the default route file only; meta declared in name@view.vue files has no effect on the route.

Give your agent this brain