Vue

Contentful の設定(Vue.js)

ヘッドレスCMSの Contentful と Vue.js を用いて記事を取得するまでの流れです。
この記事では Vue.js でやってますが、Nuxt.js の方が楽なのでおすすめです。
どちらかというと、Contentful を使うまでの設定についてのまとめです。

Contentful の準備

※管理画面からもできるので、「Vue.jsで使う準備」まですっ飛ばしてください。

  • Space の作成
  • Content Model の作成
  • API Key の作成

Contentful CLI のインストール

macなら
brew install contentful-cli

windows or macなら
yarn global add contentful-cli

ログインする

contentful login

キーを貼り付けると、~/.contentfulrc.jsonが作成される。contentful logoutするとキーが削除される。

space を作る

contentful space create --name 'スペース名'

Contentful のウェブサイトからも作成できます。
スペースを作ったら、WordPressでいうところの「投稿タイプ」を管理画面の Content Model から作成します。

space を選択する

contentful space use

どのスペースを使うか聞かれるので選びます。

アクセストークン作成

contentful space accesstoken create --name トークン名

登録したトークンは管理画面の Settings -> API Key から確認できます。

vue.js で使う準備

Contentful を追加

vue createなどで既にプロジェクトを作成していることが前提とします
プロジェクトディレクトリにて、contentful を追加

yarn add contentful

プラグインの作成

./plugins/contentful.js

const contentful = require('contentful')
// use default environment config for convenience
// these will be set via `env` property in nuxt.config.js
const config = {
  space: process.env.CTF_SPACE_ID,
  accessToken: process.env.CTF_CDA_ACCESS_TOKEN
}

// export `createClient` to use it in page components
module.exports = {
  createClient () {
    return contentful.createClient(config)
  }
}

公式のリファレンスだと Nuxt.js での使用方法なので、少し書き換えます。
Vue.js の環境変数はVUE_APP_の接頭辞が必要なので、加えておきます。

  space: process.env.CTF_SPACE_ID,
  accessToken: process.env.CTF_CDA_ACCESS_TOKEN

  ↓

  space: process.env.VUE_APP_CTF_SPACE_ID,
  accessToken: process.env.VUE_APP_CTF_CDA_ACCESS_TOKEN

/.env.local

ローカルでのみ使用する環境変数ファイルです。
Contentful 管理画面の Settings -> API Key から確認できます。
これごとサーバーにあげてしまうと、トークンがバレてしまうので注意。

VUE_APP_CTF_SPACE_ID=<スペースID>
VUE_APP_CTF_CDA_ACCESS_TOKEN=<アクセストークン>

記事の取得

Contentful の方で適当に記事を投稿したら、実際に取得してみます。

/src/main.js

とりあえず<記事ID>に欲しい記事のIDを指定。
記事の編集画面のURLが
https://app.contentful.com/spaces/<スペースID>/entries/<記事ID>
となっているので、URL末尾を貼り付けます。

<template>
  <div id="app">
    <section v-if="post">
      <h1>{{ post.fields.title }}</h1>
      <div>{{ post.fields.content }}</div>
    </section>
  </div>
</template>

<script>
import { createClient } from "@/plugins/contentful";

export default {
  name: "App",
  data() {
    return {
      post: null
    };
  },
  async mounted() {
    await createClient()
      .getEntry({
        entry_id: "<記事ID>"
      })
      .then(post => {
        this.post = post;
      });
  }
};
</script>

起動

yarn serve

これで表示できれば成功。
これだけでは使い物になりませんが、一覧ページや詳細ページの作成はまたいずれ。

関連記事

Leave a Reply