WordPress + Nuxt.js でポートフォリオサイトを作る その1

WordPressサイト（http://works.yuheijotaki.com/）の REST API と Nuxt.js でポートフォリオサイトを作成する。その1

GitHub: https://github.com/yuheijotaki/works-nuxt

サイト構成

下記のシンプルな構成で行う

• トップページ (/)
  • Works一覧（クリックで詳細ページへ）
  • カテゴリーごとの絞り込み機能
• Works詳細ページ (/work/_slug.vue)
  • サイト名などの情報、画面キャプチャ等

インストールと起動

# create-nuxt-app
$ npx create-nuxt-app [ProjectFolderName]

# 起動
$ cd [ProjectFolderName]
$ npm run dev

ページ/コンポーネント

root
|
└ pages/
|   └ index.vue
|   └ work/
|      └ _slug.vue
└ components/
    └ Logo.vue
    └ Filter.vue
    └ WorksList.vue
    └ WorksItem.vue
    └ WorksSingle.vue

スラッグベースのルーティング

前回もつまづきましたが、今回はWPの通常投稿をスラッグ形式でルーティングする。
エンドポイントは、 'https://hoge.com/wp-json/wp/v2/posts?slug=[SlugName] となり、これを async asyncData( { params } ) {... で取ってくる必要がある。

<template>
  <div>
    <WorksSingle
      :post="post"
    />
  </div>
</template>

<script>
import axios from 'axios'
import WorksSingle from '~/components/WorksSingle.vue'

export default {
  components: {
    WorksSingle
  },
  data () {
    return {
      post: {}
    }
  },
  async asyncData( { params } ) {
    const { data } = await axios.get('https://hoge.com/wp-json/wp/v2/posts?slug=' + params.slug)
    return {
      post: data[0]
    }
  }
}
</script>

参考：

• urls - How do you retrieve a post by slug name through REST API? - WordPress Development Stack Exchange
• Nuxt.jsにおけるaxios, asyncDataの使い方 | アールエフェクト

次回はカテゴリーごとの絞り込み機能を実装する。