Home>

https://izm51.com/posts/nuxt-contentful-netlify-blog-making-1/
I tried to do Nuxt + Contentful CMS while watching, but I get an error with the access token.
{{post.fields.title}}is not displayed. .

Console error display

index.vue

<template>
    
    
      {{post.fields.title}}
    
    
</template>
<script>
import client from '~/plugins/contentful'
export default {
  asyncData ({params}) {
    return client
      .getEntries ({
        content_type: 'post',
        order: '-sys.createdAt',
      })
      .then (entries =>{
        return {posts: entries.items}
      })
      .catch (e =>console.log (e))
  },
  head: {
    title: 'latest Posts',
  },
  methods: {
    formatData (iso) {
      const date = new Date (iso)
      const yyyy = new String (data.getFullYear ())
      const mm = new String (data.getMonth () + 1) .padStart (2, "0")
      const dd = new String (date.getDate ()). padStart (2, "0")
      return `${yyyy}. ${mm}. ${dd}`
    }
  },
 // methods "posts" is not defined on the ~~
  props: {
    posts: {
      type: String
    }
  }
}
</script>

nuxt.config.js

require ('dotenv'). config ()
const client = require ('./ plugins/contentful')
module.exports = {
  head: {
    title: 'nuxt-cms',
    meta: [
      {charset: 'utf-8'},
      {name: 'viewport', content: 'width = device-width, initial-scale = 1'},
      {hid: 'description', name: 'description', content: 'Nuxt.js project'}
    ],
    link: [
      {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
    ]
  },
  loading: {color: '# 3B8070'},
  build: {
    extend (config, {isDev, isClient}) {
      if (isDev&&isClient) {
        config.module.rules.push ({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude:/(node_modules) /
        })
      }
    }
  },
  plugins: [
    '~/plugins/contentful'
  ],
  modules: [
    '@ nuxtjs/dotenv',
    '@ nuxtjs/markdownit'
  ],
  markdownit: {
    injected: true,
    html: true,
    linkify: true,
    typography: true,
  },
  generate: {
    routes () {
      return client
      .getEntries ({content_type: 'post'})
      .then (entries =>{
        return entries.items.map (entry =>{
          return {
            route: "/posts/"+entry.fields.slug,
            payload: entr
          }
        })
      })
     }
    },
  env: {
  CTF_SPACE_ID: process.env.CTF_SPACE_ID,
  CTF_CDA_ACCESS_TOKEN: process.env.CTF_CDA_ACCESS_TOKEN,
  }
}

contentful.js

const contentful = require ("contentful")
const config = {
    space: process.env.CTF_SPACE_ID,
    accessToken: process.env.CTF_CDA_ACCESS_TOKEN
  }
  const client = contentful.createClient (config)
  export default client

Because it is ↓ even if curl directly from the API key set in contentful (reference: https://www.contentful.com/developers/docs/references/authentication/) I don't understand well. . Congratulations><

# Request
curl https://cdn.contentful.com/spaces/cfexampleapi/entries?access_token=wrong
# Response
{
  "sys": {
    "type": "Error",
    "id": "AccessTokenInvalid"
  },
  "message": "An access token is required. Please send one through the HTTP Authorization header or as the query parameter \" access_token \ ".",
  "requestId": "Take me down"
}