Using CDA in Nuxt

APIs Content Delivery API
1

Hi, I’m just starting with Contentful. I set up some content fields. I’ve been referring to the Nuxt blog example. I’m not doing a blog. I just want to pull some simple text fields into my Nuxt project to start. I don’t know where to find how to set up the API to get the content. I see in the example to get the owner of the blog:

client.getEntries…etc. But what do I use for the fields that I made?

I have:
Content model: layout
field: h1

Ok, I was able to query the data from the browser using this:

http://cdn.contentful.com/spaces/SPACEID/entries/?access_token=ACCESSTOKEN

The data I want is in:
items.fields.h1
items.fields.h2
items.fields.bodyText

Now I just need to know how to set that up in Nuxt.

2

Hi @ehodges2004,

First of all, we actually have a fairly comprehensive Nuxt.js guide and you should definitely take look at it later.

In any case, the first step here would be to set up your client and query, making it available to your template:

 import {createClient} from '~/plugins/contentful.js'

  const client = createClient()

  export default {
  // make use of your env variables 
    asyncData ({env}) {
      return Promise.all([
        client.getEntries({
         // provide all other query parameters from env variable
        ...,
         content_type: env.LAYOUT_CT_ID
        })
      ]).then(([entries]) => {
        // return data that should be available
        // in the template
        return {
         //access the items object of your JSON response
          items: entries.items[0]
        }
      }).catch(console.error)
    }
  }

After that, you can then proceed to the actual fetching of content that lives inside each one of these fields, with something like:

<template>
  <div>
    <!-- render data of h1 -->
    <h1>{{ items.fields.h1 }}</h1>
    ....
  </div>
</template>
3

Thanks Gabriel,

I did look at the nuxt.js guide, but it was still unclear to me.

This looks good. I will still have to set up the access token etc. in that other file. I’ll take a stab at that.

4

I’m glad it helped. Another thing to pay attention to is the environment variables to be used (fully explained in the guide), as I didn’t fully include them in this snippet.

5

Yeah, that’s what I meant by the other thing that I need to do. I’ll see if I can make it work.

6

A point of confusion was
LAYOUT_CT_ID

I didn’t know how to figure out that syntax.

7

It was simply a variable to store the ID of your content type layout. I’m sorry if it confused you.

8

I understand it now. Earlier when I was trying to figure out how to get the data from the api, I didn’t know what variables to use. This was not obvious to me in the nuxt example. I could have skimmed it too quickly though.

Anyway, I will see if I can sort it out and then I’ll report back.

Many thanks!

9

I may have this fixed…hold on…

Ok, I got it running! Thanks again for the snippet.

10

I’m glad it helped :slight_smile:

11

Follow on question:

The contents of .contentful.json are secure on a live site, yes?

I put this file in .gitignore of course.

12

It’s usually not a good idea to store them directly into your repository, as that can be a serious security concern. Instead, you can store them in your build server according to where exactly you’re hosting your application. Here’s a nuxt.js guide for Github pages and Heroku:

https://nuxtjs.org/faq/github-pages (you can safely store your environment variables under Travis CI)

https://nuxtjs.org/faq/heroku-deployment (more information also here)

1 Like
13

Ok thanks, I’ll check out the links.

14

Hi Contentful People :-),

I have a similar project to the above, but with multiple content types. Part of the JSON from Contentful looks like this:

{
sys: {
space: {
sys: {
type: "Link",
linkType: "Space",
id: "tlsglivqmxgd"
}
},
id: "5T9vhY0axU0sqim4Y68cca",
type: "Entry",
createdAt: "2018-11-08T21:05:52.814Z",
updatedAt: "2018-11-08T21:05:52.814Z",
environment: {
sys: {
id: "master",
type: "Link",
linkType: "Environment"
}
},
revision: 1,
contentType: {
sys: {
type: "Link",
linkType: "ContentType",
id: "boardOfDirectors"
}
},
locale: "en-US"
},
fields: {
one: "John Boyajy, 415-572-3303, johnboyajy@earthlink.net",
two: "Christina Bradley, 415-302-0396, cmtbradley@gmail.com",
three: "Judy Lichterman, 415-388-1022, menuet1022@aol.com",
four: "Karen Rogers, 415-892-9608, rogerskaren@comcast.net"
}
},

I have the script in a Nuxt file set up like this:

  import {createClient} from '~/plugins/contentful.js'
  
  const client = createClient()

  export default {
  // make use of your env variables 
    asyncData ({env}) {
      return Promise.all([
        client.getEntries({    
         content_type: env.boardOfDirectors_CT_ID
        })
      ]).then(([entries]) => {
        // return data that should be available
        // in the template
        return {
         //access the items object of your JSON response
          items: entries.items[0]
        }

      }).catch(console.error)
    }
  }

This is not working. I assume I’ve made a mistake in this section:

 client.getEntries({    
             content_type: env.boardOfDirectors_CT_ID
            })

Please advise :slight_smile:

15

Hi @ehodges2004,

Could you provide some more details as to what exactly is prompted to you? Do you see any error messages?

16

Hi @gabriel ,

I’m not getting any errors at the moment.

If I hit the API with the browser I get back all the data as you can see here:
https://jsoneditoronline.org/?id=817948969fab48a48e921cf4af8bda99

17

Ok, I’m starting to get it figured out. As I thought, there was an issue with how I had the content type set up. I changed it to:

content_type: 'boardOfDirectors'

With this, I got the data that I was expecting.

19

I’m glad to hear that - it’s important to note that you should always specify the content type ID, instead of name. Are you able to fetch content as it stands?

20

Thanks for checking in! Yes, I’ve got it working. I’m still using it via the name, but I’ll try the content type ID and note that for the future.

21

Glad to hear that! Let me know if you need any further help =)