Vue Storefront is now Alokai! Learn More
Fetching content

Fetching content

Basic usage

To fetch content you can use getContent method.

import { sdk } from '~/sdk.config';

sdk.contentstack.getContent({
  url: 'home-page'
});

In the example above we are fetching content by url field, but there are other options as well. Check the GetContentParams interface to see all available options.

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 getContent method. Like this.

import { sdk } from '~/sdk.config';

sdk.contentstack.getContent({
  custom: {
    type: 'page';
    field: 'title';
    value: 'Home';
  }
});

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.

You can read about creating components in Content creation section.

You can query your content using all query options described in Contentstack docs.

For example you'll be able to use multiple custom fields and types.

import { sdk } from '~/sdk.config';

sdk.contentstack.getContent({
  customQuery: {
    $and: [{ title: 'Redmi Note 3' }, { color: 'Gold' }];
  }
});

Get multiple entries

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

import { sdk } from '~/sdk.config';

sdk.contentstack.getContent({
  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.

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.

import { sdk } from '~/sdk.config';

sdk.contentstack.getContent({
  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 concerning the value of a specific field in the response body.

import { sdk } from '~/sdk.config';

sdk.contentstack.getContent({
  type: 'blogpost'
  includeCount: true,
  orderDir: 'asc',
  orderField: 'title'
});