# bukwild-contentful-utils > Utilities for interacting with Contentful with Vue and Nuxt in mind Latest version **3.3.0** (published 2020-08-11) · MIT license · 0 weekly downloads ## Install ```sh npm install bukwild-contentful-utils pnpm add bukwild-contentful-utils yarn add bukwild-contentful-utils bun add bukwild-contentful-utils ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.3.0 | | Published | 2020-08-11 | | First published | 2018-04-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 4 | | Unpacked size | 32.4 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 5 | | Author | Bukwild | | Maintainers | weotch | | Keywords | contentful, nuxt, vue | ## Links - npm: https://www.npmjs.com/package/bukwild-contentful-utils - Repository: https://github.com/BKWLD/bukwild-contentful-utils - Homepage: https://github.com/BKWLD/bukwild-contentful-utils#readme - Issues: https://github.com/BKWLD/bukwild-contentful-utils/issues - npm.io page: https://npm.io/package/bukwild-contentful-utils ## Dependencies (4) - [lodash](https://npm.io/package/lodash.md) >=4.17.5 - [contentful](https://npm.io/package/contentful.md) ^6.0.1 - [query-string](https://npm.io/package/query-string.md) ^5.0.0 - [serialize-javascript](https://npm.io/package/serialize-javascript.md) ^4.0.0 ## Recent versions - 3.3.0 (latest) — 2020-08-11 - 2.1.1 (old-version) — 2020-12-08 - 3.2.2 — 2020-08-11 - 3.2.1 — 2020-08-10 - 2.0.1 — 2019-10-29 - 3.2.0 — 2019-05-21 - 3.1.0 — 2019-05-08 - 3.0.0 — 2019-05-03 - 2.0.0 — 2019-02-22 - 1.2.7 — 2018-05-31 - 1.2.6 — 2018-05-16 - 1.2.5 — 2018-05-04 - 1.2.4 — 2018-05-03 - 1.2.3 — 2018-05-03 - 1.2.2 — 2018-05-03 - … 10 more at https://npm.io/package/bukwild-contentful-utils/versions ## README # 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: ```js // Setup utils = require('bukwild-contentful-utils') utils.config({ space: 'YOUR_CONTENTFUL_SPACE', access_token: 'YOUR_CONTENTFUL_ACCESS_TOKEN', host: 'OPTIONAL_CONTENTFUL_ENDPOINT', // Ex: "preview.contentful.com" }) ``` Then later, within components, access utils like: ```js { client } = require('bukwild-contentful-utils') client.getEntries() ``` #### Nuxt In `nuxt.config.js`: ```js modules: [ ['bukwild-contentful-utils/nuxt/module', { config: { space: process.env.CONTENTFUL_SPACE access_token: process.env.CONTENTFUL_API host: process.env.CONTENTFUL_HOST } }] ] ``` Then later, within components, access utils like: ```js // From a method that receives a Nuxt context { asyncData: function ({ app }) { app.$contentful.client.getEntries() } } // ... or from regular Vue methods { methods: { fetch: function ({ app }) { this.$contentful.client.getEntries() } } } ``` ## 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 ```js this.$contentful.img(entry.image, 500, 300, { quality: 60 }) ``` #### API `img(field:Object, width:Integer, height:Integer, options:Object)` - `field` : The property on an entry result from Contentful for the image - `width` : The desired image width - `height`: The desired image height - `options` - `format`: Image format (jpg, png, etc) - `quality`: Image quality, defaults to `90` if a jpg - `fit`: A Contentful [resizing behavior](https://www.contentful.com/developers/docs/references/images-api/#/reference/resizing-&-cropping/change-the-resizing-behavior) #### Notes - JPGs will be progressive - Returns `null` if no image has been defined ### Aspect Return the aspect ratio for an image: #### Example ```js this.$contentful.aspect(entry.image) ``` #### API `aspect(field:Object)` - `field` : The property on an entry result from Contentful for the image ### Queries Some helper methods for querying Contentful #### Example ```js export default { asyncData: async function({ app, route }) { [ article, articles ] = await Promise.all([ app.$contentful.getEntryBySlug('article', 'my-slug'), app.$contentful.getPaginatedEntries('article', { page: parseInt(route.query.page) || 1, perPage: 40, }), ]) return { article, articles } }, } ``` #### APIs `$contentful.getEntry(contentType:string, query:Object)` - `contentType` : A Contentful content type - `query` : 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 type - `slug` : A value should that match a `slug` property on the content model - `query` : Additional query options that will get merged _Like `getEntry`, but looks up by slug_ `$contentful.getEntries(contentType:string, query:Object)` - `contentType` : A Contentful content type - `query` : 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 type - `pagination` - `page` : The current page number, defaults to `1` - `perPage` : How many to fetch per page, defaults to `12` - `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 ```js export default { props: { block: Object, }, template: ` ` } ``` #### 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](https://nuxtjs.org/api/configuration-head/). 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 be `noindex`, `nofollow`, `noarchive` ) - `canonical` (text, canonical url) #### Example ```js export default { // Fetch an article which has a reference field called "seo" that is our SEO // content model asyncData: async function({ app }) { return { article: await app.$contentful.getEntryBySlug('article', 'my-slug') } }, // Use the SEO helper, passing in default SEO values from the article that // will be used if SEO options are not supplied head: function() { return this.$contentful.seo(this.article.seo, { title: this.article.title, description: this.article.abstract }) }, } ``` #### API `seo(seoReference:Object, defaults:Object)` - `seoReference` : The property on your entry which contains the SEO content model reference - `defaults` : An object whose values will be used in case the SEO content model is missing an attribute --- _Source: https://npm.io/package/bukwild-contentful-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._