Vue Storefront Contentstack

# Usage

Vue Storefront comes with the great public API (opens new window) that allows you to connect and integrate with any content delivery/management system. Usually using this API leads to connection with CMS JavaScript SDK that can be used as a bridge to build a universal data structure for content rendering.

Therefore this Contentstack integration provides composition functions called composables which use mentioned connection. Below you can find detailed instructions on how to use those composables along with your final application. Don't worry it's quite straightforward.

CMS Integration

You can read more about CMS integration process here (opens new window).

Now, import useContent composable to fetch and display the content from the Contentstack.

import { useContent } from '@vsf-enterprise/contentstack'

By using search method from the useContent composable you can get data from the previously created page.

const { search, content, loading, error } = useContent()
// run search() with url argument
await search({ url: 'home-page' })
// then get the content
return content

# Content Rendering

For enterprise Theme generated project, global components registration will be handled automatically.

First, copy the special RenderContent.vue component from the integration package.

cp node_modules/@vsf-enterprise/contentstack/components/RenderContent.vue cms/

Next, register your components. You can do this in two ways: by adding them to the RenderContent.vue component or by registering them globally.

To register components globally you have to add components section to nuxt.config.js and specify path to the components directory. This way you'll be able to use those components anywhere in the app without registering them locally:

// plugins/cms.js
import Vue from 'vue'
import Banner from '~/cms/Banner.vue'

Vue.component(Banner)

// nuxt.config.js
export default {
  components: ['~/components/cms/page/', '~/components/cms/layout/'],
}

Finally, you have to pass content data to the RenderContent component as a content prop.

Let's check it with the real life example.

<template>
  <div v-if="loading">Loading content...</div>
  <div v-if="error">Something is wrong!</div>
  <div v-if="content">
    <render-content :content="content" />
  </div>
</template>

<script>
import { onSSR } from '@vue-storefront/core'
import { useContent } from '@vsf-enterprise/contentstack'
// path to the component that you've just copied
import RenderContent from '~/cms/RenderContent.vue'

export default {
  components: {
    RenderContent
  },
  setup() {
    const { search, content, loading, error } = useContent()
    // get data
    onSSR(async () {
      await search({
        url: 'home-page'
      })
    })
    // return data
    return {
      content,
      loading,
      error,
    }
  }
}
</script>

RenderContent component will create the Banner.

<Banner :name="componentName" :props="props" />

Remember to create and define the rendered components with several props that will be used in. Instead of this you'll get a component registration error. More about: here (opens new window).

You can read about creating components in Contentstack here.

# Custom content type search

From version 0.3.0 you can search content on top of custom config as well. To do this instead of using page url or entry id use custom config in the search method. Like this.

onSSR(async () {
  await search({
    custom: {
      field: 'custom_field_name_to_search',
      value: 'custom_field_value_to_search',
      type: 'custom_content_type_to_search'
    }
  })
})

From version 0.3.4 you can query your content using all query options described in Contentstack docs (opens new window). For example you'll be able to use multiple custom fields and types.

onSSR(async () {
  await search({
    customQuery: {
      $and: [
        { title: 'Redmi Note 3' },
        { color: 'Gold' }
      ]
    }
  })
})

# Get multiple entries

You can return more than one content entry by enabling includeCount property

onSSR(async () {
  await search({
    type: 'blogpost'
    includeCount: true
  })
})

Handling multiple entries data

Multiple Entries response returns array of two elements entries objects (array) and entries count (number). It is recommended to destructure output array before use.

<script>
  import { onSSR } from '@vue-storefront/core'
  import { computed } from '@nuxtjs/composition-api'
  import { useContent } from '@vsf-enterprise/contentstack'

  export default {
    setup() {
      const { search, content } = useContent()

      onSSR(async () {
        await search({
          type: 'blogpost'
          includeCount: true
        })
      })

      const entries = computed(() => content.value[0]);
      const count = computed(() => content.value[1]);

      return {
        entries,
        count
      }
    }
  }
</script>

# Pagination

The Get all entries returns only the first 100 entries of the specified content type. You can paginate the output by using the limit & skip parameter. For example, if you have 200 entries and you want to retrieve them all, but display 10 items at a time (one page) please use: limit=10 and skip=10 parameters.

onSSR(async () {
  await search({
    type: 'blogpost'
    includeCount: true,
    limit: 10,
    skip: 10
  })
})

Pagination state

Contentstack API does not provide any pagination data except total count (total number of entries). All pagination logic and state need to be handled directly on the front-end.

# Sorting data

When fetching entries, you can sort them in the ascending or descending order with respect to the value of a specific field in the response body.

onSSR(async () {
  await search({
    type: 'blogpost'
    includeCount: true,
    orderDir: 'asc',
    orderField: 'title'
  })
})

← Live Preview →