microCMS をさわってみる その5

日本製のHeadless CMS、microCMSをさわってみる。その5

GitHub: https://github.com/yuheijotaki/micro-cms-ramen
Netlify: https://ramen.yuheijotaki.dev/

API連携（詳細ページ）

詳細ページを作成する。
Nuxtでは pages/_id.vue とすると pages/[ContentID]/ ページへと動的ルーティングできるので _id.vue を作成する。

<template lang="pug">
  div
    p id: {{ post.id }}
    p title: {{ post.title }}
    div(
      v-html="post.content"
    )
    p
      nuxt-link(to="/") index
</template>

<script>
import axios from 'axios'

export default {
  async asyncData( { params } ) {
    const { data } = await axios.get(
      `${process.env.API_URL}/${params.id}`,
      {
        headers: { 'X-API-KEY': process.env.API_KEY }
      }
    )
    return {
      post: data
    }
  }
};
</script>

一覧側のコンポーネント Post.vue には <nuxt-link> をつけてあげる。

<template lang="pug">
  li
    nuxt-link(:to="`/posts/${post.id}/`")
      p id: {{ post.id }}
      p title: {{ post.title }}
</template>

できあがった画面は、一覧

詳細

残りやること

• generate設定
• webhook設定（microCMSを更新したら自動ビルドが走るようにする）