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を更新したら自動ビルドが走るようにする)