NuxtJS layoutファイルを増やさないでページのデザインを変える

こんにちは、フロントエンドエンジニアの小山です。
今回はここ最近で覚えたNuxtJSのTipsを2回にわたりご紹介していきます。

今回のテーマは「layoutファイルを増やさないでページのデザインを変える」です。

これまでサイト内でページのデザインを大きく変えようと思った場合、layoutディレクトリ以下のファイルを増やして対応していました。

ところが何と、pageディレクトリ内だけで完結できるようです。

例えばサービス画面と管理画面を作るときに今までは

pages ┳ index.vue
      ┗ admin.vue

layout ┳ index.vue
       ┗ admin.vue

こんな感じにファイルを設置して、さらにpages/admin.vueファイル内でどのレイアウトを使うかの宣言をこんな感じで書いてました

export default {
  layout() {
    return 'admin'
  }
  ... 以下コード
}

でもこのやり方だとadminのレイアウトを使うページを増やす度に毎度レイアウトの宣言を書かなければいけないので、「うっかり書き忘れ」みたいな事がよくありました。

そこで覚えたのがこの方法で、まずファイルを以下のように設置します。

pages ┳ index.vue
      ┣ admin.vue
      ┗ admin ┳ index.vue
              ┗ hoge.vue

layout ┳ index.vue
       ┗ admin.vue

次にpages/admin.vue内部でlayoutの宣言をします。

<template>
  <div id="admin">
    <nuxt-child />
  </div>
</template>

<script>
  export default {
    layout(){
      return : 'admin'
    }
  }
</script>

この「nuxt-child」がキモです。

このようにすると/admin/にアクセスしたときにはnuxt-childの位置に、pages/admin/index.vueを表示し、さらにはlayoutにadminの方を使ってくれるようになります。
/admin/hoge/にアクセスした時も同様で、pages以下のファイルにいちいちlayoutの宣言を書く必要がなくなるのです。便利ですね。

まとめ

こんな便利な機能があったなんて…
やっぱりドキュメントはきちんと読んでおくべきですね。
次回は「axiosでBigIntを扱う」をテーマにお送りします。