Zenn
🔥

【Nuxt3】PageからLayoutを経由してComponentに値を渡す方法

2025/02/14に公開1件
Vue.js
Nuxt 3
tech

はじめに

今回の記事では、Nuxt3 において、page ファイルで設定した値を layout ファイル内の component に渡す方法について解説したいと思います。
例えば、ページごとに異なるタイトルなどを設定し、それを layout で呼び出しているヘッダーに渡す、といったシチュエーションが考えられますね。

結論

早速ですが結論です。
page ファイルで<NuxtLayout>コンポーネントを呼び出し、それに Props を渡すことで実現可能です。

サンプルコード

今回の例では、「sample.vue というページファイルで設定した値を、custom.vue というレイアウトファイルを経由して、commmonPageTitle というコンポーネントファイルに渡す」と想定します。

page

sample.vue
<script lang="ts" setup>
// NuxtLayoutとの競合を避けるためにfalseにする
definePageMeta({
  layout: false,
});

// layout/componentに渡すために定義
const props = defineProps<{
  pageTitle?: string;
}>();
const title: string = "ページのタイトル";
</script>

<template>
  <div>
    <NuxtLayout name="custom" :pageTitle="title">
      <!-- pageコンテンツ -->
    </NuxtLayout>
  </div>
</template>

まずは script 内で ページタイトルを設定します。また、この値をコンポーネントに渡すため props も宣言しておきましょう。
次に、template 内で<NuxtLayout>を呼び出します。この<NuxtLayout>に、先ほどの props を渡してあげることで、layout ファイルに定数 title の値が pageTitle として受け渡されることになります。

<NuxtLayout>を呼び出す際の注意点として、デフォルトレイアウトとの競合を防ぐために、definePageMeta でlayout: falseを設定してあげる必要があります。
https://nuxt.com/docs/guide/directory-structure/layouts#overriding-a-layout-on-a-per-page-basis

layout

custom.vue

<script setup lang="ts">
  // Componentに渡すために定義
  const props = defineProps<{
    pageTitle: string;
  }>()

</script>

<template>
  <div>
    <header>
      <CommonPageTitle :pageTitle="pageTitle" />
    </header>
    <main>
      <slot />
    </main>
  </div>
</template>

page と同じ要領で、props を宣言して component(CommonPageTitle)に渡しましょう。

component

commonPageTitle.vue

<script setup lang="ts">
// Layoutから渡されるものを定義
const props = defineProps<{
  pageTitle: string;
}>();
</script>

<template>
  <div>
    <h1>
      {{ props.pageTitle }}
    </h1>
  </div>
</template>

script 内で props を宣言するのは他のファイルと同様です。
template 内ではマスタッシュ構文で props の pageTitle を展開しましょう。

これで page から来た値を受け取ることができました！

まとめ

今回は、Page から Layout を経由して Component に値を渡す方法を解説しました。
<NuxtLayout>コンポーネントを呼び出して、そこに Props を渡すことで実装できます。

参考

Discussion