bukwild-contentful-utils
Utilities for interacting with Contentful, designed with Vue and Nuxt in mind.
Install
yarn add bukwild-contentful-utils or npm install --save bukwild-contentful-utils
Configure
Vue
In a your bootstrapping JS:
// Setuputils = utils
Then later, within components, access utils like:
client = client
Nuxt
In nuxt.config.js
:
modules: 'bukwild-contentful-utils/nuxt/module' config: space: processenvCONTENTFUL_SPACE access_token: processenvCONTENTFUL_API host: processenvCONTENTFUL_HOST
Then later, within components, access utils like:
// From a method that receives a Nuxt context { app$contentfulclient } // ... or from regular Vue methods methods: { this$contentfulclient }
Usage
Client
See the Configuration instructions for an example of how to get access to the raw Contentful client.
Img
Helper method for creating Contentful URLs that transform images:
Example
this$contentful
API
img(field:Object, width:Integer, height:Integer, options:Object)
field
: The property on an entry result from Contentful for the imagewidth
: The desired image widthheight
: The desired image heightoptions
format
: Image format (jpg, png, etc)quality
: Image quality, defaults to90
if a jpgfit
: A Contentful resizing behavior
Notes
- JPGs will be progressive
- Returns
null
if no image has been defined
Aspect
Return the aspect ratio for an image:
Example
this$contentful
API
aspect(field:Object)
field
: The property on an entry result from Contentful for the image
Queries
Some helper methods for querying Contentful
Example
{ article articles = await Promiseall app$contentful app$contentful return article articles }
APIs
$contentful.getEntry(contentType:string, query:Object)
contentType
: A Contentful content typequery
: Additional query options that will get merged
Gets a single Entry, merging its id and create/update dates into the fields and returning only the fields themselves (not sys)
$contentful.getEntryBySlug(contentType:string, slug:String, query:Object)
contentType
: A Contentful content typeslug
: A value should that match aslug
property on the content modelquery
: Additional query options that will get merged
Like getEntry
, but looks up by slug
$contentful.getEntries(contentType:string, query:Object)
contentType
: A Contentful content typequery
: Additional query options that will get merged
Get a list of entries for a given content type
$contentful.getPaginatedEntries(contentType:string, pagination:Object, query:Object)
contentType
: A Contentful content typepagination
page
: The current page number, defaults to1
perPage
: How many to fetch per page, defaults to12
initialPerPage
: Optionally set a different number of results on first page
query
: Additional query options that will get merged
Get a slice of entries given pagination params
References
Helpers for dealing with references
Example
props: block: Object template: ` <ul><li v-for='resource in $contentful.refs(block.resources)' :key='resource.id'> {{ resource.name }} </li></ul>`
APIs
$contentful.refs(entries:array)
entries
: An array of reference entries (may be undefined)
Take an array of references (that may be empty or undefined), filter out the broken references (like where only the link with no fields is returned), and then return just the attributes, merging in the id, dates, and sys
$contentful.ref(entry:object)
entry
: A single reference entry
Merge in the id, dates, and sys into an entry's fields
SEO
A helper for setting seo-related fields in Nuxt's head
property. This assumes you've created a Contentful content model for SEO fields that has the following fields:
title
description
image
(file, used for open graph image)robots
(radios, may benoindex
,nofollow
,noarchive
)canonical
(text, canonical url)
Example
// Fetch an article which has a reference field called "seo" that is our SEO // content model { return article: await app$contentful } // Use the SEO helper, passing in default SEO values from the article that // will be used if SEO options are not supplied { return this$contentful }
API
seo(seoReference:Object, defaults:Object)
seoReference
: The property on your entry which contains the SEO content model referencedefaults
: An object whose values will be used in case the SEO content model is missing an attribute