Contentful Vue

A Vue JS plugin for the Contentful API. Also checkout the Contentful API docs and Contentful NPM Package docs because this plugin just wrapps those.

Installation

Node

Using npm:

npm i contentful-vue

Using yarn:

yarn add contentful-vue

Browser

<script src='https://unpkg.com/contentful-vue'></script>

Useage

Inside main.js. If you don't declare an environment ID, it will default to master.

import ContentfulVue from 'contentful-vue';

Vue.use(ContentfulVue, {
  space: YOUR - SPACE,
  accessToken: YOUR - ACCESS - TOKEN,
  environment: YOUR - ENVIRONMENT - ID
});

Now inside any Vue component you can this.$contentful to access the Contentful API.

Examples

Some basic examples are shown bellow but the Contentful API docs and Contentful NPM Package docs are a lot more useful.

Get Space

this.$contentful
  .getSpace()
  .then((res) => {
    ...
  })
  .catch((error) => {
    ...
});

Get all Entries

this.$contentful
  .getEntries()
  .then((res) => {
    ...
  })
  .catch((error) => {
    ...
  })

With Pagination

const query = {
  skip: 0,
  limit: 10,
};

this.$contentful
  .getEntries(query)
  .then((res) => {
    ...
  })
  .catch((error) => {
    ...
  })

With Pagination and Search

const query = {
  skip: 0,
  limit: 10,
  query: query,
};

this.$contentful
  .getEntries(query)
  .then((res) => {
    ...
  })
  .catch((error) => {
    ...
  })

Get Entry

this.$contentful
  .getEntry(ENTRY-ID)
  .then((res) => {
    ...
  })
  .catch((error) => {
    ...
  })