レイアウトを有効にする

レイアウトは、app.vue に <NuxtLayout> を追加することで有効になります：

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

レイアウトを使用するには：

• definePageMeta を使用してページに layout プロパティを設定します。
• <NuxtLayout> の name プロパティを設定します。

デフォルトレイアウト

~/layouts/default.vue を追加します：

<template>
  <div>
    <p>すべてのページで共有されるデフォルトのレイアウトコンテンツ</p>
    <slot />
  </div>
</template>

レイアウトファイル内では、ページのコンテンツは <slot /> コンポーネントに表示されます。

名前付きレイアウト

-| layouts/
---| default.vue
---| custom.vue

その後、ページで custom レイアウトを使用できます：

definePageMeta({
  layout: 'custom'
})

すべてのページのデフォルトレイアウトを直接上書きするには、<NuxtLayout> の name プロパティを使用します：

<script setup lang="ts">
// APIコールやログイン状態に基づいて選択することができます
const layout = "custom";
</script>

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

ネストされたディレクトリにレイアウトがある場合、レイアウトの名前はそのパスディレクトリとファイル名に基づき、重複するセグメントが削除されます。

明確にするために、レイアウトのファイル名がその名前と一致することをお勧めします：

レイアウトを動的に変更する

setPageLayout ヘルパーを使用して、レイアウトを動的に変更することもできます：

<script setup lang="ts">
function enableCustomLayout () {
  setPageLayout('custom')
}
definePageMeta({
  layout: false,
});
</script>

<template>
  <div>
    <button @click="enableCustomLayout">レイアウトを更新</button>
  </div>
</template>

ページごとにレイアウトを上書きする

ページを使用している場合、layout: false を設定し、ページ内で <NuxtLayout> コンポーネントを使用することで完全に制御できます。

<script setup lang="ts">
definePageMeta({
  layout: false,
})
</script>

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header> ヘッダーのテンプレートコンテンツ。 </template>

      ページの残りの部分
    </NuxtLayout>
  </div>
</template>