Hello,
I was following the guide how to set up Contentful with Vue+Nuxt. Everything works perfectly as long as content is loaded directly in a page.
As soon as I try to create a component with content from contentful, I always get the error Can not read property 'fields' of undefined.
Do I have to pass person and posts as props in some way?
index.vue
...
<content></content>
...
content.vue
...
<h1>{{ person.fields.name }}</h1>
...
<script>
import {createClient} from '~/plugins/contentful.js'
const client = createClient()
export default {
// `env` is available in the context object
asyncData ({env}) {
return Promise.all([
// fetch the owner of the blog
client.getEntries({
'sys.id': env.CTF_PERSON_ID
}),
// fetch all blog posts sorted by creation date
client.getEntries({
'content_type': env.CTF_BLOG_POST_TYPE_ID,
order: '-sys.createdAt'
})
]).then(([entries, posts]) => {
// return data that should be available
// in the template
return {
person: entries.items[0],
posts: posts.items
}
}).catch(console.error)
}
}
</script>
Hmm⊠Are the request made properly and return the data?
I see that the code you pasted is more or less the code from the tutorial.
env is available in the context object
asyncData ({env}) {
Without having the code in front of me Iâd say that env and asyncData are nuxt specific things and are not available in a vue.js component. The approach there has to be sightly different.
This means that if you want to fetch data in a single component not being connected to nuxt you have to either pass down the config to this component or make env available globally.
Hi Stefan, thanks for the quick answer!
Everything worked perfectly before extracting the contentful-related lines into a component.
Not sure if I get what you mean by âcomponent not being connected to nuxtâ.
I want to fetch the content on generation of the static page with nuxt, not on pageload, so it should be connected to nuxt.
env not being available might be a point
I got this now:
[Vue warn]: Property or method is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
I see this is probably more a question for the Nuxt/Vue community than a Contentful pro.
Nuxt does some magic for the page components. asyncData is not a vue thing and is only available in nuxt page components. When you extract it to a view component this doesnât work anymore.
Thatâs why I would assume that env is also not available then anymore.
That said if you want to do the calls inside of âindependent vue componentsâ inside of ânuxt page componentsâ you have to restructure a few things.
Itâs hard for me to give advice on that though as I donât have the code in front of me right now.
I see this is probably more a question for the Nuxt/Vue community than a Contentful pro.
Okay, thanks!
I just started learning Vue+Nuxt, sorry for being so noobish
But this should be solvable once I find out how to do the restructuring you suggested.
Got it working by moving the contentful script to index.vue and passing through the props.
But Iâm pretty sure this is not the ârightâ solution, since data from contentful is now only available in index and no other pages. It defies the whole purpose of working with componentsâŠ
index.vue
...
<content v-bind:person="person" v-bind:posts="posts"></content>
...
<script>
import Content from './Content'
import {createClient} from '~/plugins/contentful.js'
const client = createClient()
export default {
components: {
'content': Content
},
// `env` is available in the context object
asyncData ({env}) {
return Promise.all([
// fetch the owner of the blog
client.getEntries({
'sys.id': env.CTF_PERSON_ID
}),
// fetch all blog posts sorted by creation date
client.getEntries({
'content_type': env.CTF_BLOG_POST_TYPE_ID,
order: '-sys.createdAt'
})
]).then(([entries, posts]) => {
// return data that should be available
// in the template
return {
person: entries.items[0],
posts: posts.items
}
}).catch(console.error)
}
}
</script>
)
