multiple environment Contentful client binding for NuxtJS
- Makes
this.$contentfulandapp.$contentfulglobally available so you can easily fetch Contentful data everywhere - Supports multiple environments, so you can switch easily
- Available in SSR context (
asyncData)
npm i contentful-module
- Open your Contentful panel
- Settings
- API keys
- Add API key (top right button)
- Use Space ID and Content Delivery API - access token in your
nuxt.config.js
// nuxt.config.js
export default {
build: {
transpile: ['contentful-module']
},
modules: [
'contentful-module'
],
contentful: {
default: 'master',
activeEnvironments: ['master'],
environments: {
master: {
space: 'YOUR_SPACE_ID',
accessToken: 'CONTENT_DELIVERY_API_ACCESS_TOKEN',
environment: 'master'
}
}
}
}You can use $contentful.client as explained on Content Delivery API Docs
export default {
methods: {
myMethod() {
// same as: https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/search-parameters/content-type/query-entries/console/js
this.$contentful.client.getEntries({
content_type: '<content_type_id>'
)}
}
}
}export default {
asyncData({ app }) {
// same as: https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/search-parameters/content-type/query-entries/console/js
app.$contentful.client.getEntries({
content_type: '<content_type_id>'
)}
}
}// nuxt.config.js
export default {
build: {
transpile: ['contentful-module']
},
modules: [
'contentful-module'
],
contentful: {
default: 'master', // this will be available by calling this.$contentful.client
activeEnvironments: ['master'], // useful when you need to activate an environment by using process.env vars
environments: {
master: {
space: 'YOUR_SPACE_ID',
accessToken: 'CONTENT_DELIVERY_API_ACCESS_TOKEN',
environment: 'master'
}
}
}
}Now you will be able to:
- Call
masterenvironment by usingthis.$contentful.client
// nuxt.config.js
export default {
build: {
transpile: ['contentful-module']
},
modules: [
'contentful-module'
],
contentful: {
default: 'master', // this will be available by calling this.$contentful.client
activeEnvironments: ['master', 'staging'], // useful when you need to activate an environment by using process.env vars
environments: {
master: {
space: 'YOUR_SPACE_ID',
accessToken: 'CONTENT_DELIVERY_API_ACCESS_TOKEN',
environment: 'master'
},
staging: {
space: 'YOUR_SPACE_ID',
accessToken: 'CONTENT_DELIVERY_API_ACCESS_TOKEN',
environment: 'staging'
}
}
}
}Now you will be able to:
- Call
masterenvironment by usingthis.$contentful.clientorthis.$contentful.master - Call
stagingenvironment by usingthis.$contentful.staging