最終更新日: 2023年08月15日

レイアウト ディレクトリ

Nuxtはカスタマイズ可能なレイアウトフレームワークを提供しており、アプリケーション全体で使用できます。共通のUIやコードパターンを再利用可能なレイアウトコンポーネントに抽出するのに最適です。

レイアウトはlayouts/ディレクトリに配置され、使用時に非同期インポートを介して自動的にロードされます。レイアウトは、app.vueに <NuxtLayout>を追加することで使用されます。~/pagesの統合を使用している場合は、ページのメタデータの一部として layout プロパティを設定するか、<NuxtLayout> のプロップスとして手動で指定します。（注：レイアウト名はケバブケースに正規化されるため、someLayoutは some-layoutになります。）

もしアプリケーションに1つのレイアウトしかない場合は、app.vue を使用することをおすすめします。

デフォルトのレイアウトを有効にする

~/layouts/default.vueを追加：

  • layouts/default.vue
  • vue
<template>
  <div>
    // すべてのページで共有されるデフォルトのレイアウト
    <slot />
  </div>
</template>

レイアウトファイルでは、レイアウトのコンテンツは<slot /> にロードされます。特別なコンポーネントを使用する必要はありません。

もしapp.vueを使用する場合、<NuxtLayout>も追加する必要があります。

  • app.vue
  • vue
<template>
  <NuxtLayout>
    // ページのコンテンツ
  </NuxtLayout>
</template>

別のレイアウトを設定する

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

次のようにして、デフォルトのレイアウトを直接上書きできます:

  • app.vue
  • ts
<script setup lang="ts">
    // API呼び出しやログイン状態に基づいて選択することがあります
    const layout = "custom";
</script>

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

また、次のようにしてページごとにデフォルトのレイアウトを上書きすることもできます:

  • pages/index.vue
  • ts
<script>
    // これは <script setup> と <script> の両方で動作します
    definePageMeta({
        layout: "custom",
    });
</script>
  • app.vue
  • vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
  • layouts/custom.vue
  • vue
<template>
  <div>
    カスタムレイアウト
    <slot />
  </div>
</template>
  • layouts/default.vue
  • vue
<template>
  <div>
    デフォルトレイアウト
    <slot />
  </div>
</template>

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

レイアウトにはrefやcomputedプロパティを使用することもできます。

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

<template>
  <div>
    <button @click="enableCustomLayout">Update layout</button>
  </div>
</template>

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

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

  • pages/index.vue
  • vue
<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>
  • layouts/custom.vue
  • vue
<template>
  <div>
    <header>
      <slot name="header">
        Default header content
      </slot>
    </header>
    <main>
      <slot />
    </main>
  </div>
</template>