<NuxtPage> は Nuxt に組み込まれているコンポーネントで、app/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> は、階層をさらに下に渡す必要があるカスタムプロップも受け取ります。

例えば、以下の例では、foobar の値が NuxtPage コンポーネントに渡され、その後ページコンポーネントに渡されます。

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

ページコンポーネントで foobar プロップにアクセスできます：

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

console.log(props.foobar) // 出力: 123

defineProps でプロップを定義していない場合でも、NuxtPage に渡されたプロップはページの attrs から直接アクセスできます：

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