nuxtjsからstrapiのAPIを実行する

はじめに

• 前回、dockerでnuxtjs環境をdockerで作成したので、nuxtjsでstrapiを実行する px-wing.hatenablog.com

• strapi側では前回に住所情報を返すAPIを作成しているので、そちらのAPIを呼び出してみる。 px-wing.hatenablog.com

モジュールのインストールと設定

• @ nuxt / strapiモジュールを使用しています。

yarn add @nuxtjs/strapi

• 次の設定で、@ nuxtjs / strapiをnuxt.config.jsのモジュールセクションに追加します。 entitiesには作成したcorrectionを指定する。singleも指定することができるらしい

  modules: [
    '@nuxtjs/strapi'
  ],

  strapi: {
    entities: [
      { name: 'addresses', type: 'collection' }
    ]
  }

nuxtjs側のコード

<template>
    <div class="container">
       <div v-if="error">
        {{ error }}
      </div>
      <ul v-else>
        <li v-for="address in addresses" :key="address.id">
          {{ `${address.post_code}/${address.prefectures}`  }}
        </li>
      </ul>
    </div>
</template>
<script>
export default {
  data () {
    return {
      addresses: [],
      error: null
    }
  },
  async mounted () {
    try {
      this.addresses = await this.$strapi.$addresses.find()
    } catch (error) {
      this.error = error
    }
  }
}
</script>

実行結果

0600000/北海道
0640941/北海道
0600041/北海道
0600042/北海道
0640820/北海道
0600031/北海道
0600001/北海道
0640821/北海道
0600032/北海道
0600002/北海道
0640822/北海道
0600033/北海道
0600003/北海道
0640823/北海道