layouts

Nuxt は、共通の UI パターンを再利用可能なレイアウトとして抽出するためのレイアウトフレームワークを提供します。
最高のパフォーマンスのために、このディレクトリに配置されたコンポーネントは、使用時に非同期インポートを介して自動的にロードされます。

レイアウトを有効にする

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

app/app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

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

  • definePageMeta を使用して、ページに layout プロパティを設定します。
  • <NuxtLayout> の name プロパティを設定します。
レイアウト名はケバブケースに正規化されるため、someLayout は some-layout になります。
レイアウトが指定されていない場合、app/layouts/default.vue が使用されます。
アプリケーションにレイアウトが1つしかない場合は、代わりに app.vue を使用することをお勧めします。
他のコンポーネントとは異なり、レイアウトには単一のルート要素が必要です。これにより、Nuxt はレイアウト変更間のトランジションを適用できます。また、このルート要素は <slot /> にすることはできません。

デフォルトレイアウト

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

app/layouts/default.vue
<template>
  <div>
    <p>Some default layout content shared across all pages</p>
    <slot />
  </div>
</template>

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

名前付きレイアウト

ディレクトリ構造
-| layouts/
---| default.vue
---| custom.vue

次に、ページで custom レイアウトを使用できます。

pages/about.vue
<script setup lang="ts">
definePageMeta({
  layout: 'custom',
})
</script>
definePageMeta について詳しく学びましょう。

<NuxtLayout> の name プロパティを使用して、すべてのページのデフォルトレイアウトを直接オーバーライドできます。

app/app.vue
<script setup lang="ts">
// You might choose this based on an API call or logged-in status
const layout = 'custom'
</script>

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

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

ファイルレイアウト名
~/layouts/desktop/default.vuedesktop-default
~/layouts/desktop-base/base.vuedesktop-base
~/layouts/desktop/index.vuedesktop

明確にするために、レイアウトのファイル名をその名前に合わせることをお勧めします。

ファイルレイアウト名
~/layouts/desktop/DesktopDefault.vuedesktop-default
~/layouts/desktop-base/DesktopBase.vuedesktop-base
~/layouts/desktop/Desktop.vuedesktop
Docs > 4 X > Examples > Features > Layouts でライブの例を読んで編集してください。

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

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

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

<template>
  <div>
    <button @click="enableCustomLayout">
      Update layout
    </button>
  </div>
</template>
Docs > 4 X > Examples > Features > Layouts でライブの例を読んで編集してください。

ページごとのレイアウトのオーバーライド

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

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

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header>
        Some header template content.
      </template>

      The rest of the page
    </NuxtLayout>
  </div>
</template>
ページ内で <NuxtLayout> を使用する場合は、それがルート要素ではないことを確認してください（または レイアウト/ページトランジションを無効にする）。