http://works.yuheijotaki.com/)の REST API と Nuxt.js でポートフォリオサイトを作成する。その1
GitHub: https://github.com/yuheijotaki/works-nuxt
下記のシンプルな構成で行う
/
)/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>
参考:
次回はカテゴリーごとの絞り込み機能を実装する。