Nuxt.js + WordPressの連携 その2

モダンな制作環境を構築したくて始めたNuxt.jsとWordPressの連携。今回はその２となります。

WordPressでREST APIを書いて、API作成へのハードルは下がりました。（とてつもなく難しいことだと思ってました。API作れる人、全員神！ぐらいまで思ってました。笑）

以下が前回、WordPressでREST APIの設定を中心に書いたnoteです。

今回はフロント側の話で、Nuxt.jsで出力する話になります。

REST APIから出力するにはNuxt.jsではaxiosというHTTP通信を使います。

ちなみに今回はローカル環境でgenerateして静的に生成してサーバーにアップする方法を取ってます。SSRができる環境のサーバーを用意できないので、静的化してます。いずれSSRしたサイトをにできればと思っています。

まずはインストール。npmの場合は以下の通り。

npm install @nuxtjs/axios

インストールしたら、nuxt.config.jsに記述します。

export default {
 //省略
 modules: [
   "@nuxtjs/axios",
 ],
 //省略
}

詳細の記事を取得する際には、page/_id.vueに下記のように記述します。

<script>
export default {
 async asyncData ({ $axios, params }) {
   const path_parameter_id = `${params.id}`
   const postsdata = await $axios.$get(`REST APIのURL/${params.id}`)

   return {
		path_parameter_id,
		postsdata
	}
 }
}
</script>

表示は下記の通り、v-forでJSON形式の配列データを展開していきます。

<div v-for="(item, index) in postsdata" :key="index">
 // 省略
 // v-forを用いてpostsdataというデータを展開
 // {{ item.title }}や{{ item.date }}で表示
 // titleやdateはREST APIで設定
</div>

静的化なので、nuxt.config.jsにgenerateの記述をします。

export default {
 //省略
 generate: {
   fallback : true,
   interval : 100,
   routes(callback) {
     return axios.get('REST APIのURL').then(posts => {
       const route_post = posts.data.map((post) => {
         return {
           route   : `/seminar/${post.id}`,
           payload : {
             posts       : posts.data,
             currentPost : post,
           }
         }
       })
       callback(null, route_post)
     })
   }
 },
  //省略
}

おそらく必要最低限のことはしているはず。（間違ってたらどうしよう。。）

細かく言えばbaseURL設定したり、storeでの状態管理や、WordPressの投稿や更新をトリガーにしてデプロイするとかあるんですが、書けるほど理解してないのでいずれ書きます。自分の為に。

上記でも言ったように、運用するにはサーバーやホスティングどうするとか考えることが多く実案件で運用するまで学習コストは高めな気がしますが、運用できれば表示の高速化やサイトの運用や保守の面でメリット多そうなので、１つずつ課題を克服していきます。

次回は、サーバーの構成や静的サイトのホスティングについて備忘録として書いていこうかと思います。