Nuxt.js で一つのテンプレートを使い回す

記事一覧のページネーションを静的サイトで再現する場合、1ページ目のみパスは / で、2ページ目以降は /page/_page/ に配置したいといった場面があります。

また、普通の記事一覧とカテゴリごとの記事一覧でも処理が似通っており、わざわざテンプレートを分ける必要がありません。

異なるパスで同じテンプレートを使用する場合、二通りの方法があります。

pages フォルダ内で完結させる

例えば、pages/index.vue を他のパスでも使いまわしたい場合は、以下のようなファイルを置くことで、全く同じ処理になります。

// pages/page/_page/index.vue
<script>
import tpl from '~/pages/index'
export default tpl
</script>

この方法の利点は、Nuxt.js の元々の自動ルーティング機能を利用できることです。pages フォルダを見ればサイトの構造が分かるのも良いですね。

欠点として、パスごとにスクリプトが増えてしまいます（パスにつき 1.89KB ほど）。

router.extendRoutes() を使う

nuxt.config.js の router プロパティで、追加のルートと使うコンポーネントを指定します。Vue Router の知識が必要になりますが、不要なスクリプトの生成を避けられます。

// nuxt.config.js
import { sortRoutes } from '@nuxt/utils'

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'page-page',
        path: 'page/:page',
        component: resolve(__dirname, 'pages/index'),
      })
      // 必要なだけ追加する

      // いい感じに並べ替えてもらう
      sortRoutes(routes)
    },
  },
}

<nuxt-child> でページを表示している場合は、該当するルートの children に追加しなければなりません。

その場合でも sortRoutes() を実行することで、ルートの照合順序を並べ替えてくれます。

どのようなルートを追加すれば良いか分からない場合は、一番目の方法で生成されるルートを extendRoutes() 内で console.log(routes) して見るのも手です。

pages フォルダ内の vue ファイルは、先頭にハイフンを付けることで Nuxt.js に無視させることもできます（-index.vue とする）。