Vue Storefront Contentstack

# Api Reference

# useContent

Provides full handling for CMS data fetching.

const { content, search, loading, error } = useContent(id)

# content

Storing fetched data from CMS.

  • Type: Array
  • Default: []

Fetching data from CMS.

  • Type: Function
  • Arguments:
    • url: Page URL slug
      • Type: String
    • id - Entry ID (use instead of url)
      • Type: String
    • type: Content Type (optional)
      • Type: String
      • Default: page
    • locale: Locale (optional)
      • Type: String
      • Default: en
    • includeReference - Array of content references (optional)
      • Type: String[]
    • custom - Custom search config (use instead of url or id, optional)
      • Type: CustomSearch
      • Default: {}
    • customQuery - accepts object of Contentstack query (opens new window)
      • Type: any
      • Default: {}
    • includeCount - Return multiple entries with total count (optional)
      • Type: Boolean
    • limit - paginate the output of a request (require includeCount=true, optional)
      • Type: Number
    • skip - skip a specific number of entries in the output (require includeCount=true, optional)
      • Type: Number
    • orderDir - sort direction (require includeCount=true and orderField, optional)
      • Type: asc | desc
    • orderField - sort field (require includeCount=true and orderDir, optional)
      • Type: String
    • livePreviewQuery - Live Preview query parameters
      • Type: unknown
CustomSearch: {
  type: string // name of custom type
  field: string // name of field to search
  value: string // value of field to search
}

includeReference: [
  'content.reference.content', // root level references
  'content.group.items.item.content.reference.content', // nested content references (example)
],

# loading

Data fetching loading indicator.

  • Type: Boolean
  • Default: false

# error

Data fetching error object.

  • Type: Object
  • Default: {}

# RenderContent

Will render the CMS data to the Vue.js components.

<render-content :content="content" />

# content

Passing fetched CMS data.

← Changelog →