<NuxtPage> é um componente embutido que vem com o Nuxt. Ele permite que você exiba páginas de nível superior ou aninhadas localizadas no diretório pages/.

<NuxtPage> inclui os seguintes componentes:

<template>
  <RouterView #default="{ Component }">
    <!-- Opcional, ao usar transições -->
    <Transition>
      <!-- Opcional, ao usar keep-alive -->
      <KeepAlive>
        <Suspense>
          <component :is="Component" />
        </Suspense>
      </KeepAlive>
    </Transition>
  </RouterView>
</template>

Por padrão, o Nuxt não habilita <Transition> e <KeepAlive>. Você pode habilitá-los no arquivo nuxt.config ou definindo as propriedades transition e keepalive em <NuxtPage>. Se você quiser definir uma página específica, pode configurá-la em definePageMeta no componente da página.

Como <NuxtPage> usa <Suspense> internamente, o comportamento do ciclo de vida do componente durante as mudanças de página difere de uma aplicação Vue típica.

Em uma aplicação Vue típica, um novo componente de página é montado apenas depois que o anterior foi totalmente desmontado. No entanto, no Nuxt, devido à forma como o Vue <Suspense> é implementado, o novo componente de página é montado antes que o anterior seja desmontado.

Props

• name: informa ao <RouterView> para renderizar o componente com o nome correspondente na opção de componentes do registro de rota correspondente.
  • tipo: string
• route: localização da rota que tem todos os seus componentes resolvidos.
  • tipo: RouteLocationNormalized
• pageKey: controla quando o componente NuxtPage é re-renderizado.
  • tipo: string ou function
• transition: define transições globais para todas as páginas renderizadas com o componente NuxtPage.
  • tipo: boolean ou TransitionProps
• keepalive: controla a preservação do estado das páginas renderizadas com o componente NuxtPage.
  • tipo: boolean ou KeepAliveProps

Exemplo

Por exemplo, se você passar uma chave que nunca muda, o componente <NuxtPage> será renderizado apenas uma vez - quando for montado pela primeira vez.

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

Você também pode usar uma chave dinâmica baseada na rota atual:

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

Alternativamente, pageKey pode ser passado como um valor key via definePageMeta na seção <script> do seu componente Vue no diretório /pages.

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

Ref da Página

Para obter o ref de um componente de página, acesse-o atravé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> também aceita props personalizadas que você pode precisar passar mais adiante na hierarquia.

Por exemplo, no exemplo abaixo, o valor de foobar será passado para o componente NuxtPage e depois para os componentes de página.

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

Podemos acessar a prop foobar no componente de página:

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

console.log(props.foobar) // Saída: 123

Se você não definiu a prop com defineProps, qualquer prop passada para NuxtPage ainda pode ser acessada diretamente dos attrs da página:

const attrs = useAttrs()
console.log(attrs.foobar) // Saída: 123