<NuxtPage> es un componente incorporado que viene con Nuxt. Te permite mostrar páginas de nivel superior o anidadas ubicadas en el directorio pages/.

<NuxtPage> incluye los siguientes componentes:

<template>
  <RouterView #default="{ Component }">
    <!-- Opcional, cuando se usan transiciones -->
    <Transition>
      <!-- Opcional, cuando se usa keep-alive -->
      <KeepAlive>
        <Suspense>
          <component :is="Component" />
        </Suspense>
      </KeepAlive>
    </Transition>
  </RouterView>
</template>

Por defecto, Nuxt no habilita <Transition> y <KeepAlive>. Puedes habilitarlos en el archivo nuxt.config o configurando las propiedades transition y keepalive en <NuxtPage>. Si deseas definir una página específica, puedes configurarla en definePageMeta en el componente de la página.

Dado que <NuxtPage> utiliza <Suspense> internamente, el comportamiento del ciclo de vida del componente durante los cambios de página difiere del de una aplicación típica de Vue.

En una aplicación típica de Vue, un nuevo componente de página se monta solo después de que el anterior se haya desmontado completamente. Sin embargo, en Nuxt, debido a cómo se implementa Vue <Suspense>, el nuevo componente de página se monta antes de que el anterior se desmonte.

Props

• name: indica a <RouterView> que renderice el componente con el nombre correspondiente en la opción de componentes del registro de ruta coincidente.
  • tipo: string
• route: ubicación de la ruta que tiene todos sus componentes resueltos.
  • tipo: RouteLocationNormalized
• pageKey: controla cuándo se vuelve a renderizar el componente NuxtPage.
  • tipo: string o function
• transition: define transiciones globales para todas las páginas renderizadas con el componente NuxtPage.
  • tipo: boolean o TransitionProps
• keepalive: controla la preservación del estado de las páginas renderizadas con el componente NuxtPage.
  • tipo: boolean o KeepAliveProps

Ejemplo

Por ejemplo, si pasas una clave que nunca cambia, el componente <NuxtPage> se renderizará solo una vez, cuando se monte por primera vez.

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

También puedes usar una clave dinámica basada en la ruta actual:

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

Alternativamente, pageKey puede pasarse como un valor key a través de definePageMeta desde la sección <script> de tu componente Vue en el directorio /pages.

definePageMeta({
  key: route => route.fullPath
})

Ref de la Página

Para obtener el ref de un componente de página, accede a él a través de ref.value.pageRef

<script setup lang="ts">
const page = ref()

function logFoo () {
  page.value.pageRef.foo()
}
</script>

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

const foo = () => {
  console.log('foo method called')
}

defineExpose({
  foo,
})

Props Personalizados

<NuxtPage> también acepta props personalizados que puedes necesitar pasar más abajo en la jerarquía.

Por ejemplo, en el siguiente ejemplo, el valor de foobar se pasará al componente NuxtPage y luego a los componentes de la página.

<template>
  <NuxtPage :foobar="123" />
</template>

Podemos acceder al prop foobar en el componente de la página:

<script setup lang="ts">
const props = defineProps<{ foobar: number }>()

console.log(props.foobar) // Salida: 123

Si no has definido el prop con defineProps, cualquier prop pasado a NuxtPage aún puede ser accedido directamente desde los attrs de la página:

const attrs = useAttrs()
console.log(attrs.foobar) // Salida: 123