Vue Storefront Storyblok

# Api Reference

# useContent

Composable provides complete handling for fetching data from the CMS. Data received from it is locally cached. To avoid overriding the data, pass a unique id when calling the search function.

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

# content

  • Type: content: { value: {} | [] }
  • Description: Vue Ref object (opens new window) that stores the data fetched from the CMS.
  • Default: []

Response

All the received data will be almost in the raw form. In other words all the values that Storyblok is passing through the API will be provided. However, we're meddling the response a bit. How? All the meta-data will ba passed to the _meta object. Story / component related data will pass as a default Storyblok object content - though we're not removing any properties. Additionally, you can get _editable field that is handling connection between your app and the Storyblok Bridge. All the nested objects and references will be delivered with the same format.

{
  "component": {},
  "content": {},
  "_meta": {},
  "_editable": {}
}
  • Type: (ContentSearchParams) => void
  • Description: Fetching data from CMS.
  • Params:
    • url
      • Description: Story / page slug URL. Optional if using id.
      • Type: url?: string
    • id
      • Description: Story / page ID. Use instead of url. You can provide multiple ids separated with the commas. All the components will be delivered in defined ids order. Response will provide an Array with all the components.
      • Type: id?: string
      • Example: id: 'id-one, id-two, id-three'
    • cache
      • Description: Local caching mechanism.
      • Type: cache?: boolean
      • Default: true
    • version
      • Description: Story / page version type.
      • Type: version?: 'draft' | 'published'
      • Default: published
    • locale
      • Description: Story / page locale. If not set, default language will be handled.
      • Type: locale?: string
    • relations
      • Description: Relations list that should be resolved with.
      • Type: relations?: string
      • Example: relations: 'posts.post, articles.post'
    • custom
      • Description: Custom filtering, data fetching. Check all the options here (opens new window). Response will provide an Array with all the components.
      • Type: custom?: {}
      • Example:
{
  "custom": {
    "filter_query": {
      "title": {
        "in": "Test Title"
      }
    }
  }
}

Here is the content search params interface.

export interface ContentSearchParams {
  id?: string
  url?: string
  cache?: boolean
  version?: Version
  custom?: {} | CustomSearch
  locale?: string
  relations?: string
}

export interface CustomSearch {
  filter_query: {}
}

export type Version = 'draft' | 'published'

# loading

  • Type: loading: boolean
  • Description: Data fetching loading indicator.
  • Default: false

# error

  • Type: Object
  • Description: Data fetching error object.
  • Default: {}

# RenderContent

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

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

# content

# storyblokBridge

Real-time Visual Editor.

storyblokBridge(content.value, events, relations)

# content

# events

  • Type: events?: string[]
  • Default: 'change', 'input'
  • Description: Events list that Storyblok bridge is listening.
  • Behavior: Events (opens new window)

# relations

  • Type: relations?: string[]
  • Example: ['posts.post', 'articles.post']
  • Description: Story relations to resolve.
  • Behavior: Relations (opens new window)

← Changelog →