<NuxtPage>

ソース
pages/ ディレクトリにあるページを表示するには、<NuxtPage> コンポーネントが必要です。

<NuxtPage> は、Nuxt に付属する組み込みコンポーネントです。これにより、app/pages/ ディレクトリにあるトップレベルまたはネストされたページを表示できます。

<NuxtPage> は、以下のラッパーです。<RouterView>Vue Router のコンポーネントです。<RouterView> の代わりに使用する必要があります。なぜなら、前者は内部状態をさらに注意深く処理するからです。そうしないと、useRoute() が誤ったパスを返す可能性があります。

<NuxtPage> には以下のコンポーネントが含まれています。

<template>
  <RouterView v-slot="{ Component }">
    <!-- Optional, when using transitions -->
    <Transition>
      <!-- Optional, when using keep-alive -->
      <KeepAlive>
        <Suspense>
          <component :is="Component" />
        </Suspense>
      </KeepAlive>
    </Transition>
  </RouterView>
</template>

デフォルトでは、Nuxt は <Transition> と <KeepAlive> を有効にしません。これらは nuxt.config ファイルで有効にするか、<NuxtPage> の transition および keepalive プロパティを設定することで有効にできます。特定のページを定義したい場合は、ページコンポーネントの definePageMeta で設定できます。

ページコンポーネントで <Transition> を有効にする場合、ページに単一のルート要素があることを確認してください。

<NuxtPage> は内部で <Suspense> を使用するため、ページ変更時のコンポーネントのライフサイクル動作は、一般的な Vue アプリケーションとは異なります。

一般的な Vue アプリケーションでは、新しいページコンポーネントは、前のページコンポーネントが完全にアンマウントされた後のみマウントされます。しかし、Nuxt では、Vue の <Suspense> の実装方法により、新しいページコンポーネントは、前のページコンポーネントがアンマウントされる前にマウントされます。

プロップス

  • name: <RouterView> に、マッチしたルートレコードのコンポーネントオプションで対応する名前のコンポーネントをレンダリングするように指示します。
    • 型: string
  • route: すべてのコンポーネントが解決されたルートロケーション。
    • 型: RouteLocationNormalized
  • pageKey: NuxtPage コンポーネントが再レンダリングされるタイミングを制御します。
    • 型: string または function
  • transition: NuxtPage コンポーネントでレンダリングされるすべてのページに対して、グローバルなトランジションを定義します。
  • keepalive: NuxtPage コンポーネントでレンダリングされるページのステートの保持を制御します。
Nuxt は、/pages ディレクトリにあるすべての Vue コンポーネントファイルをスキャンしてレンダリングすることで、name と route を自動的に解決します。

例

例えば、決して変更されないキーを渡すと、<NuxtPage> コンポーネントは、最初にマウントされたときのみレンダリングされます。

app/app.vue
<template>
  <NuxtPage page-key="static" />
</template>

現在のルートに基づく動的なキーを使用することもできます。

<NuxtPage :page-key="route => route.fullPath" />
ここで $route オブジェクトを使用しないでください。これは、<NuxtPage> が <Suspense> でページをレンダリングする方法に問題を引き起こす可能性があります。

あるいは、pageKey は、/pages ディレクトリ内の Vue コンポーネントの <script> セクションから definePageMeta を介して key 値として渡すことができます。

app/pages/my-page.vue
<script setup lang="ts">
definePageMeta({
  key: route => route.fullPath,
})
</script>
Docs > 4 X > Examples > Routing > Pagesでライブの例を読んで編集してください。

ページの Ref

ページコンポーネントの ref を取得するには、ref.value.pageRef を介してアクセスします。

app/app.vue
<script setup lang="ts">
const page = ref()

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

<template>
  <NuxtPage ref="page" />
</template>
my-page.vue
<script setup lang="ts">
const foo = () => {
  console.log('foo method called')
}

defineExpose({
  foo,
})
</script>

カスタムプロップ

<NuxtPage> は、階層のさらに下まで渡す必要があるカスタムプロップも受け入れます。

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

app/app.vue
<template>
  <NuxtPage :foobar="123" />
</template>

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

app/pages/page.vue
<script setup lang="ts">
const props = defineProps<{ foobar: number }>()

console.log(props.foobar) // Outputs: 123

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

app/pages/page.vue
<script setup lang="ts">
const attrs = useAttrs()
console.log(attrs.foobar) // Outputs: 123
</script>
詳細については、Docs > 4 X > Guide > Directory Structure > App > Pages を参照してください。