WP REST APIを元にNuxt.jsのgenerateで記事ページを自動生成してみる（いわゆる動的ルーティング）

pages/
 - _.vue
 - index.vue
nuxt.config.js

dist/
 - archives/
   - 101/
     - index.html
   - 102/
     - index.html
   - 103/
     - index.html
 - index.html

export default {
  generate: {
    routes: [
      '/post/1',
      '/post/2',
      '/post/3'
    ]
  }
}

import axios from 'axios'
export default {
  mode: 'universal', // modeはuniversalに。

  generate: {
    routes () {
      // ちなみにREST APIの仕様で全件取得は出来ません（最大100件）。
      // 一度に全件生成したい場合はREST API側をカスタマイズする必要があります。
      return axios.get('https://test.com/wp-json/wp/v2/posts/?per_page=100')
      	.then((res) => {
      	  // map()メソッドでパーマリンクの情報をrouteに渡します。
          return res.data.map((post) => {
	      	// パーマリンクの文字列をディレクトリ生成用に加工します。
            const str = post.link;
            const _link = str.replace( /https:\/\/test.com/g , "" );
            post.link = _link;

            return {
              route: post.link,  // ここに入る文字列がパス情報になる。
              payload: post,     // テンプレートで値を受け取れるようデータをpayloadへ。
            }
          })
        })
    }
  }
}

<template>
	<div class="container">
	  <h1>{{title}}</h1>
	  <h2>{{dir}}</h2>
	</div>
</template>
<script>
export default {
  data () {
    return {
      // 記事ページで使うデータを格納する為の変数を定義していきます。
      title: '',
      dir: ''
    }
  },
  async asyncData ({ store, params, error, payload }) {
    // payloadからデータを受け取ったらそこから値を変数へ入れます。
    if (payload) {
      return {
        // ここでどんな値にアクセスするかはREST APIで返ってくるjson構造を参照
        title: payload.title.rendered,
        dir: payload.link
      }
    }
  }
}
</script>