<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> は、階層の下位に渡す必要があるカスタムプロップも受け入れます。

例えば、以下の例では、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