Nuxt.jsとcontentfulの連携

nuxt側の初期設定のみ

  • nuxt
  • contentful

Nuxt側の初期設定

公式ドキュメント

contentfulインストール

npm install contentful --save

contentful.jsをplugins/配下に追加

contentful.js

const contentful = require('contentful')
const config = {
  space: process.env.CTF_SPACE_ID,
  accessToken: process.env.CTF_CDA_ACCESS_TOKEN
}
module.exports = {
  createClient () {
    return contentful.createClient(config)
  }
}

プロジェクト直下に.contentful.jsonファイルを作成

.contentful.json (注意）　必ずgithubのプライべートリポジトリにpushする、もしくは .gitignoreに追加して、あとでNetlify側で登録することもできる

{
  "CTF_SPACE_ID": "Space ID",
  "CTF_CDA_ACCESS_TOKEN": "access token"
}

Space IDとaccess tokenはcontentfulサイトのSettingsのAPI keysで確認

nuxt.config.jsを編集

const config = require('./.contentful.json')
const contentful = require('contentful')

export default {
 //追加
  env: {
    CTF_SPACE_ID: config.CTF_SPACE_ID,
    CTF_CDA_ACCESS_TOKEN: 　　　config.CTF_CDA_ACCESS_TOKEN
  },

Home