<NuxtPage>

<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>에 일치하는 라우트 레코드의 components 옵션에서 해당 이름의 컴포넌트를 렌더링하도록 지시합니다.
  • 타입: string
• route: 모든 컴포넌트가 resolve된 라우트 위치입니다.
  • 타입: RouteLocationNormalized
• pageKey: NuxtPage 컴포넌트가 다시 렌더링되는 시점을 제어합니다.
  • 타입: string 또는 function
• transition: NuxtPage 컴포넌트로 렌더링되는 모든 페이지에 대한 전역 트랜지션을 정의합니다.
  • 타입: boolean 또는 TransitionProps
• keepalive: NuxtPage 컴포넌트로 렌더링되는 페이지의 상태 보존을 제어합니다.
  • 타입: boolean 또는 KeepAliveProps

예시

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

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

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

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

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

<script setup lang="ts">
definePageMeta({
  key: route => route.fullPath
})
</script>

페이지의 Ref

페이지 컴포넌트의 ref를 얻으려면, ref.value.pageRef를 통해 접근할 수 있습니다.

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

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

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

<script setup lang="ts">
const foo = () => {
  console.log('foo 메서드 호출됨')
}

defineExpose({
  foo,
})
</script>

커스텀 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에서 직접 접근할 수 있습니다:

<script setup lang="ts">
const attrs = useAttrs()
console.log(attrs.foobar) // 출력: 123
</script>