Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scaccogatto/contentful-module
multiple environment Contentful client binding for NuxtJS
https://github.com/scaccogatto/contentful-module
contentful nuxtjs
Last synced: about 2 months ago
JSON representation
multiple environment Contentful client binding for NuxtJS
- Host: GitHub
- URL: https://github.com/scaccogatto/contentful-module
- Owner: scaccogatto
- Archived: true
- Created: 2019-11-12T13:35:33.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-11T16:35:38.000Z (about 3 years ago)
- Last Synced: 2024-07-20T12:05:04.048Z (2 months ago)
- Topics: contentful, nuxtjs
- Language: JavaScript
- Homepage:
- Size: 422 KB
- Stars: 20
- Watchers: 4
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# NuxtJS Contentful Module
> multiple environment Contentful client binding for NuxtJS
## Features
- [x] Makes `this.$contentful` and `app.$contentful` globally available so you can easily fetch Contentful data everywhere
- [x] Supports multiple environments, so you can switch easily
- [x] Available in SSR context (`asyncData`)
## Install
### Install the module
`npm i contentful-module`
### Find your API keys
1. Open your Contentful panel
2. Settings
3. API keys
4. Add API key (top right button)
5. Use Space ID and Content Delivery API - access token in your `nuxt.config.js`
### Edit `nuxt.config.js`
```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'
}
}
}
}
```
## Usage
### Contentful docs
You can use `$contentful.client` as explained on [Content Delivery API Docs](https://www.contentful.com/developers/docs/references/content-delivery-api/)
### Components (`.vue` files)
```js
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: ''
)}
}
}
}
```
### Context
```js
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: ''
)}
}
}
```
### Single Environment
```js
// 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:
- [x] Call `master` environment by using `this.$contentful.client`
### Multiple Environments
```js
// 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:
- [x] Call `master` environment by using `this.$contentful.client` or `this.$contentful.master`
- [x] Call `staging` environment by using `this.$contentful.staging`