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

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

f:id:jotaki:20190924093802p:plain

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>

参考:

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