<NuxtPage>는 Nuxt에 내장된 컴포넌트로, pages/ 디렉토리에 위치한 최상위 또는 중첩된 페이지를 표시할 수 있습니다.

<NuxtPage>는 다음과 같은 컴포넌트를 포함합니다:

<template>
  <RouterView #default="{ Component }">
    <!-- 전환을 사용할 때 선택 사항 -->
    <Transition>
      <!-- keep-alive를 사용할 때 선택 사항 -->
      <KeepAlive>
        <Suspense>
          <component :is="Component" />
        </Suspense>
      </KeepAlive>
    </Transition>
  </RouterView>
</template>

기본적으로 Nuxt는 <Transition>과 <KeepAlive>를 활성화하지 않습니다. nuxt.config 파일에서 활성화하거나 <NuxtPage>의 transition 및 keepalive 속성을 설정하여 활성화할 수 있습니다. 특정 페이지를 정의하려면 페이지 컴포넌트의 definePageMeta에서 설정할 수 있습니다.

<NuxtPage>는 내부적으로 <Suspense>를 사용하기 때문에 페이지 변경 시 컴포넌트 라이프사이클 동작이 일반적인 Vue 애플리케이션과 다릅니다.

일반적인 Vue 애플리케이션에서는 이전 페이지 컴포넌트가 완전히 언마운트된 후에만 새 페이지 컴포넌트가 마운트됩니다. 그러나 Nuxt에서는 Vue <Suspense>의 구현 방식 때문에 새 페이지 컴포넌트가 이전 페이지가 언마운트되기 전에 마운트됩니다.

Props

• name: <RouterView>에 일치하는 경로 레코드의 컴포넌트 옵션에서 해당 이름의 컴포넌트를 렌더링하도록 지시합니다.
  • type: string
• route: 모든 컴포넌트가 해결된 경로 위치입니다.
  • type: RouteLocationNormalized
• pageKey: NuxtPage 컴포넌트가 다시 렌더링되는 시점을 제어합니다.
  • type: string 또는 function
• transition: NuxtPage 컴포넌트로 렌더링된 모든 페이지에 대한 전역 전환을 정의합니다.
  • type: boolean 또는 TransitionProps
• keepalive: NuxtPage 컴포넌트로 렌더링된 페이지의 상태 보존을 제어합니다.
  • type: boolean 또는 KeepAliveProps

Example

예를 들어, 변경되지 않는 키를 전달하면 <NuxtPage> 컴포넌트는 처음 마운트될 때만 렌더링됩니다.

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

현재 경로를 기반으로 동적 키를 사용할 수도 있습니다:

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

또한, pageKey는 /pages 디렉토리의 Vue 컴포넌트의 <script> 섹션에서 definePageMeta를 통해 key 값으로 전달할 수 있습니다.

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

Page's Ref

페이지 컴포넌트의 ref를 얻으려면 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,
})

Custom Props

<NuxtPage>는 계층 구조 아래로 전달해야 할 사용자 정의 props도 허용합니다.

예를 들어, 아래 예제에서 foobar의 값은 NuxtPage 컴포넌트에 전달된 후 페이지 컴포넌트로 전달됩니다.

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

페이지 컴포넌트에서 foobar prop에 접근할 수 있습니다:

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

console.log(props.foobar) // 출력: 123

defineProps로 prop을 정의하지 않은 경우, NuxtPage에 전달된 모든 props는 페이지 attrs에서 직접 접근할 수 있습니다:

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