microCMS をさわってみる その4

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

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

API連携（一覧ページ）

.env設定

まず.envにAPIキーなど環境設定を行います。
下記の記事通りでいけます。
Nuxt.jsとmicroCMSで採用ページを作成してみよう！

nuxt.config.js

require("dotenv").config();
const { API_KEY, API_URL } = process.env;

export default {
  // ...
  env: {
    API_KEY,
    API_URL
  }
  // ...
}

.env
microCMSのAPIキーは「APIリファレンス」から取得したものを貼り付けます。

API_KEY=APIキー
API_URL=https://jtk.microcms.io/api/v1/demo

これで各.vueファイルで process.env.API_KEY のように process.env. を前につけて環境設定を読み込めます。

下ごしらえができたら、一覧ページのAPI連携をしてみます。

• components/Posts.vue （リスト用）
• components/Post.vue （アイテム用）

の.vueファイル2つ作ります。

index.vue

トップページの大元ファイルではPosts（リスト用コンポーネント）を読み込みします

<template lang="pug">
  div
    Logo
    Posts
</template>

<script>
import Logo from '~/components/Logo.vue'
import Posts from '~/components/Posts.vue'

export default {
  components: {
    Logo,
    Posts
  }
}
</script>

components/Posts.vue （リスト用）

一覧用コンポーネントファイルでは axios 使ってAPIを読み込みします。
また子コンポーネント Post に値を受け渡すので :bind しておきます。

<template lang="pug">
  ul
    Post(
      v-for="(post,index) in posts"
      :key="index"
      :post="post"
    )
</template>

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

export default {
  name: 'Posts',
  components: {
    Post
  },
  data() {
    return {
      posts: []
    }
  },
  mounted :function(){
    axios.get(
      process.env.API_URL,
      {
        headers: { "X-API-KEY": process.env.API_KEY }
      }
    )
    .then( response => {
      this.posts = response.data.contents
    })
    .catch( error => {
      console.log(error)
    })
  }
}
</script>

components/Post.vue （アイテム用）

アイテム用コンポーネントファイルでは props でデータを受け取って描画します。

<template lang="pug">
  li
    p id: {{ post.id }}
    p title: {{ post.title }}
</template>

<script>
export default {
  name: 'Post',
  props:{
    'post': {
      type: Object,
      default: ''
    }
  }
}
</script>

これで投稿の描画を実装できました。

残りやること

• API連携（詳細ページ）
• generate設定
• webhook設定（microCMSを更新したら自動ビルドが走るようにする）