<NuxtPage>

<NuxtPage>는 Nuxt와 함께 제공되는 빌트인 컴포넌트이다. pages/ 디렉토리에 있는 최상위 페이지 또는 중첩 페이지를 표시할 수 있다 

<NuxtPage>는 Vue Router의 <RouterView> 컴포넌트를 감싼 래퍼이다. 동일한 name 과 route 속성을 갖는다.

 

Props

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

Nuxt는 /pages 디렉토리에 있는 모든 Vue 컴포넌트 파일을 스캔하고 렌더링하여 자동으로 name 및 route를 리졸브한다.

 

사용 예

예를 들어 static키를 전달하면 NuxtPage 컴포넌트가 마운트될 때 한 번만 렌더링다.

<!--
app.vue
-->

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

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

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

주의) <Suspense> 를 사용한 <NuxtPage> 에서는 $route 객체를 사용하지 말자. 문제를 발생시킬지 모른다.

 

또는 /pages 디렉토리의 Vue 컴포넌트 <script>섹션 definePageMeta 을 통해 pageKey 값(key) 으로 전달할 수 있다.

// pages/my-page.vue

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

참고) Docs > Examples > Routing > Pages

 

Page's Ref

ref 페이지 컴포넌트를 얻으려면 ref.value.pageRef 을 통해 액세스한다.

<!--
app.vue
-->

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

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

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

 

Custom Props

<NuxtPage> 는 계층 구조를 더 아래로 전달해야 할 수 있는 사용자 정의 props 도 허용한다.
이러한 맞춤 props은 Nuxt 앱 attrs 을 통해 액세스할 수 있다.

<NuxtPage :foobar="123" />

예를 들어, 위 예에서 foobar 값은 <script setup> 안 템플릿 혹은 useAttrs().foobar 에서 $attrs.foobar 를 통하여 얻을 수 있다.