Usage

This integration provides composition functions called composables to fetch data from the Sanity CMS. Internally it uses the Sanity JavaScript JSK to make a connection to the Sanity API. Below you can find detailed instructions on how to use these composables within your Vue Storefrontapplication.

Import and call the useContent composable from the @vsf-enterprise/sanity to fetch and display the content from the Sanity CMS.

In the example below, we will call the search method from this composable to get data from the previously created page.

import { onSSR } from '@vue-storefront/core';
import { useContent } from '@vsf-enterprise/sanity';

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

    onSSR(async () => {
      await search({ url: 'home-page' });
    })

    return {
      content
    };
  }
};

Custom content type search

---

To customize the search parameters instead of using page url or entry id use the custom parameter in the search method:

import { onSSR } from '@vue-storefront/core';
import { useContent } from '@vsf-enterprise/sanity';

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

    onSSR(async () => {
      await search({
        custom: {
          type: 'content_type_name',
          field: 'custom_field_name_to_search',
          value: 'custom_field_value_to_search',
        }
      })
    })
    
    return {
      content
    };
  }
};

You can read about creating components in Sanity on the Content page.