【Nuxt】レイアウトを共通化 / カスタム

はじめに

nuxtではプロジェクトを作成するとプロジェクトの配下にlayoutsディレクトリが作成される。このlayoutsディレクトリを使ってページのレイアウトを共通化したり、カスタムすることができる。

デフォルトレイアウト

nuxtはデフォルトのレイアウトとしてdefault.vueを持っていて、特にレイアウトの指定がない場合はdefault.vueが適用される。
layoutsディレクトリの配下にdefault.vueを作成することで共通で使用するデフォルトのレイアウトを作成できる。(使用頻度の高いレイアウトをデフォルトとして設定する)

layouts/default.vue

<template>
  <div class="App">
    <div class="App__header">
      <TheHeader />
    </div>
    <div class="App_body">
      <!-- ↓ ここでページコンポーネントが表示される -->
      <nuxt />
    </div>
    <div class="App__footer">
      <TheFooter />
    </div>
  </div>
</template>

<script lang="ts">
export default {};
</script>

カスタムレイアウト

特定のページでだけヘッダーを表示させたくないなど、レイアウトをカスタムしたい場合に利用する。

layoutsディレクトリにカスタムしたレイアウトのファイルを作成。
今回はヘッダーのないレイアウトをplain.vueとして作成。

layouts/plain.vue

<template>
  <div class="App">
    <div class="App_body">
      <nuxt />
    </div>
    <div class="App__footer">
      <TheFooter />
    </div>
  </div>
</template>

<script lang="ts">
export default {};
</script>

レイアウトを使用したいページでレイアウトを指定。
layoutキーに文字列で使用したいレイアウトのファイル名を指定する。

index.vue

<script lang="ts">
// トップページではヘッダーを表示しないレイアウトを使用
export default {
  // レイアウト plainを指定
  layout: 'plain'
};
</script>