nuxt-childでlayoutの量産を防ぐ

はじめに

この度、nuxt-childというコンポーネントの存在を知り、戦慄しました。

API: コンポーネント - NuxtJS

これまで、ページカテゴリの数だけレイアウトファイルを量産し、似通った初期化処理を何度も書いてしまっていました。
が、それは本来、レイアウトファイルで行うべきことではなかったのです。

この記事ではnuxt-childコンポーネントの使い方をご紹介します。

Nested Routes

Nuxtにはネストされたルート（Nested Routes）という機能が存在します。
これは、ページパスと同名のページコンポーネントをレイアウト相当として動作させる事ができる機能です。

ネストされたルート (ルーティング - NuxtJS)

たとえば、以下のようなページ構成にするとします。

.
└── pages/
    ├── product/
    │   ├── index.vue
    │   ├── list.vue
    │   └── _id.vue
    └── product.vue

有効になるルートは/product、/product/list、/product/_idの３つです。

このとき、pages/product.vueに記述した内容は、pages/product/以下のすべてのページコンポーネントで有効になります。
つまり、pages/product.vueがpages/product/以下のページのレイアウトとして機能するようになります。

また、pages/product.vueには実際のページを表示させる領域にnuxt-childコンポーネントを配置する必要があります。

<!-- /pages/product.vue -->
<template>
  <div class="page-container">
    <TheHeader class="header">
      <div class="contents">
        <TheBreadcrumbs />
        <!-- ここにページの内容が入る -->
        <nuxt-child />
      </div>
    </TheHeader>
  </div>
</template>

このようにすれば、/pages/product/以下のページで共通したヘッダーとパンくずリストを表示することができます。
同様に、マイページや注文関連のページもそれぞれ異なるレイアウトで表示することができます。

そして、レイアウトファイルはグローバルスタイルやレイアウトの定義のみとなり、量産を防ぐことができます。

おわりに

Nuxtはディレクトリ階層ベースのルーティングシステムのため、かなりURL定義が重要になります。
Nested Routesもカテゴリごとにディレクトリ分けされて初めて機能します。

カテゴリごとにディレクトリ分けされていないようなケースではあまり有効ではありません。
そのときは諦めてレイアウトファイルを量産するなどしてください。

それ以外に良い方法があれば教えてほしい...。