Pulling Contentful data using VueJS and Nuxt.JS

Question

Okay, I want to pull data (existing one) from Contentful using VueJS.

I'm no developer so I don't really understand how this fully works, I was able to follow through half-way of their tutorial, but as I already have my space and data, I got stuck, the tutorial sticks to a blog-type and never really mentioned anything how I can pull a data with different structure.

Based on the tutorial, I have to create a .contentful.json containing

{
  "CTF_PERSON_ID": "15jwOBqpxqSAOy2eOO4S0m",
  "CTF_BLOG_POST_TYPE_ID": "blogPost",
  "CTF_SPACE_ID": "YOUR_SPACE_ID",
  "CTF_CDA_ACCESS_TOKEN": "YOUR_ACCESS_TOKEN"
}

They didn't mention how I can pull other data than what they had provided as a template.

What I want to know: 1. If I have my own space, not from the template, how or where can I find something similar to "CTF_PERSON_ID" and "CTF_BLOG_POST_TYPE_ID".

score 1 · Answer 1 · answered Sep 04 '18 at 16:15

Are you using nuxt or "Vanilla Vue"? These id's you mention are read in the nuxt.config.js file which is the main configuration file for nuxt. Nuxt run's javascript on the server and client side and that's why it needs to know what the configuration parameters are.

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

module.exports = {
  // ...
  env: {
    CTF_SPACE_ID: config.CTF_SPACE_ID,
    CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN,
    CTF_PERSON_ID: config.CTF_PERSON_ID,
    CTF_BLOG_POST_TYPE_ID: config.CTF_BLOG_POST_TYPE_ID
  }
  // ...
}

The env property in the nuxt.config object is read in the page components (pages/index.vue or pages/blog/index.vue).

const client = createClient()
export default {
  asyncData ({ env, params }) {
    return client.getEntries({
      'content_type': env.CTF_BLOG_POST_TYPE_ID,
      order: '-sys.createdAt'
    }).then(entries => {
      return {
        posts: entries.items
      }
    })
  },
  components: {
    ArticlePreview,
    Navigation
  }
}

If you have different structures you can add a new content type id in your configuration file (.contentful.json) and add it to env in nuxt.config.js (this could be restructured to avoid the duplication, but that's a different topic) and then access it in the page components via env to query the data using getEntries.

Hope that helps. :)

Pulling Contentful data using VueJS and Nuxt.JS

1 Answers1