<NuxtPage> · Nuxtコンポーネント

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

<NuxtPage>は、Vue Routerの<RouterView>コンポーネントのラッパーです。
同じnameとrouteのpropsを受け入れます。

<NuxtPage>は、内部状態をさらに考慮するため、<RouterView>の代わりに使用する必要があります。そうしないと、useRoute()が誤ったパスを返す可能性があります。

Props

name: 一致するルートレコードのcomponentsオプションで、対応する名前のコンポーネントをレンダリングするようにRouterViewに指示します。
- 型: string
route: すべてのコンポーネントが解決されたルートロケーション。
- 型: RouteLocationNormalized
pageKey: NuxtPageコンポーネントが再レンダリングされるタイミングを制御します。
- 型: stringまたはfunction
transition: NuxtPageコンポーネントでレンダリングされるすべてのページに対してグローバルトランジションを定義します。
- 型: booleanまたはTransitionProps
keepalive: NuxtPageコンポーネントでレンダリングされるページのステート保持を制御します。
- 型: booleanまたはKeepAliveProps

Nuxtは、/pagesディレクトリにあるすべてのVueコンポーネントファイルをスキャンおよびレンダリングすることにより、nameとrouteを自動的に解決します。

例

たとえば、staticキーを渡すと、NuxtPageコンポーネントはマウント時に一度だけレンダリングされます。

app.vue

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

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

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

$routeオブジェクトは、<NuxtPage>が<Suspense>でページをレンダリングする方法に問題を引き起こす可能性があるため、ここでは使用しないでください。

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

pages/my-page.vue

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

ドキュメント > 例 > ルーティング > ページでライブ例を読み、編集してください。

ページの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>

my-page.vue

<script setup lang="ts">
const foo = () => {
  console.log('foo method called')
}

defineExpose({
  foo,
})
</script>

カスタムProps

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

これらのカスタムpropsは、Nuxtアプリのattrsを介してアクセスできます。

<NuxtPage :foobar="123" />

たとえば、上記の例では、foobarの値は、テンプレートで$attrs.foobarを使用するか、<script setup>でuseAttrs().foobarを使用することで利用可能になります。

詳細については、ドキュメント > ガイド > ディレクトリ構造 > ページをご覧ください。

Nuxtは、SSRで子要素のいずれかがエラーをトリガーした場合に、クライアントでコンテンツをレンダリングするために<NuxtClientFallback>コンポーネントを提供します。

Nuxtは、ページおよびエラーページにレイアウトを表示するために<NuxtLayout>コンポーネントを提供します。