NuxtにContentfulを設定する方法。導入からデータ取得までの流れをまとめてみた【スクショあり】

どーも、ここ最近Contentfulにハマっている、ぐるたか@guru_takaです。

今回はNuxtにContentfulを導入、そしてデータ取得する方法を紹介します。

Contentfulの概念や、使い方については、以下の解説記事を参考にしてみてください！

Contentfulとは？ヘッドレスCMSって何？誰でもわかるように解説してみる

【初心者向け】Contentfulの始め方。コンテンツモデルの作成や投稿、APIキーの場所などまとめ【使い方】

スポンサードリンク

導入の手順
簡単な使い方
参考リンク

導入の手順

基本的には公式の導入方法に沿って、進めていきます。

STEP.1

contentfulのnomパッケージをインストール

STEP.2

.envファイル作成

STEP.3

nuxt.config.jsの編集

STEP.4

初期化ファイルの作成

STEP1：contentfulのnomパッケージをインストール

コマンドライン

$ npm install contentful

STEP2：`.env`ファイル作成

APIキーを登録した.envファイルを以下のように作成します。

.env

CTF_SPACE_ID=スペースID
CTF_CDA_ACCESS_TOKEN=アクセストークン

スペースIDとアクセストークンの場所は、以下にあるので各自チェックしましょう！

STEP.1

APIの情報がある「APIｓ」に移動

STEP.2

スペースIDとアクセストークンを確認

【初心者向け】Contentfulの始め方。コンテンツモデルの作成や投稿、APIキーの場所などまとめ【使い方】

STEP3：`nuxt.config.js`の編集

続いて、nuxt.config.jsを編集するのですが、まず、dotenvモジュールがインストールされているか、確認します。

インストールされている場合は、nuxt.config.jsのmoduleにnuxtjs/dotenvが記載されています。

nuxt.config.js

modules: [
    // Doc: https://github.com/nuxt-community/dotenv-module
    '@nuxtjs/dotenv',
  ],

未インストールの場合は、以下のコマンドで@nuxtjs/dotenvをインストールして下さい！

コマンドライン

$ npm install --save @nuxtjs/dotenv

nuxtjs/dotenvの存在が確認できたら、以下の設定を追記しましょう！

nuxt.config.js

...........
  env: {
    CTF_SPACE_ID: process.env.CTF_SPACE_ID,
    CTF_CDA_ACCESS_TOKEN: process.env.CTF_CDA_ACCESS_TOKEN,
  }
...........

開発段階では関係ありませんが、サーバーデプロイ時に、サーバー側の環境変数の設定で使用します。

参考 Nuxt.js+Netlify+Contentfulの環境でアクセストークンエラーになる現象のメモ

STEP4：初期化ファイルの作成

最後に、初期化ファイルを作成し、pluginsフォルダに格納します。

plugins/contentful.js

const contentful = require('contentful')

const config = {
  space: process.env.CTF_SPACE_ID,
  accessToken: process.env.CTF_CDA_ACCESS_TOKEN
}

export default contentful.createClient(config)

あとは、contentfulのデータを取得したいcomponentでimportすればOKです！

簡単な使い方

Contentfulを使う準備は終わったので、最後に簡単にデータを取得する方法を紹介します！

pages/index.vueでasyncDataに以下のコードを追記して、$ npm run devで動かしてみてください。

pages/index.vue

<script>import contentfulClient from '@/plugins/contentful'

export default {
  asyncData({ env }) {
    return contentfulClient
      .getEntries()
      .then((entries) => {
        console.log(entries.items)
        return {
          ssample: entries.items
        }
      })
      .catch(console.error)
  }
}
</script>

コンソールログをみてみると、スペースID内の全コンテンツデータが出力されています。