Vue Storefront Sanity

# Installation

To use our Sanity integration, you need to add the @vsf-enterprise/sanity package into your Vue Storefront application:

npm install @vsf-enterprise/sanity --save

or

yarn add @vsf-enterprise/sanity

This is an Enterprise package

This package is part of our Enterprise offering and is only available from our private registry. To install it, you'll need to have access to it and be logged in. To gain access, please get in touch with our Sales team (opens new window).

# Setup

Open the middleware.config.js file in your root folder and add the Sanity configuration shown below. The integration will pass the configuration object to the Sanity JavaScript Client (opens new window). See its documentation to learn more about it.

// middleware.config.js
module.exports = {
  integrations: {
    sanity: {
      location: '@vsf-enterprise/sanity/server',
      configuration: {
        projectId: 'SANITY_PROJECT_ID',
        dataset: 'SANITY_DATASET',
        apiVersion: 'SANITY_API_VERSION',
        token: 'SANITY_TOKEN', 
        useCdn: 'SANITY_USE_CDN',
      },
    },
    // ... other configs
  },
}

Open the nuxt.config.js file and add the @vsf-enterprise/sanity/nuxt package to the modules array:

// nuxt.config.js
export default {
  modules: [
    '@vsf-enterprise/sanity/nuxt'
  ]
}

Additionally, add the @vsf-enterprise/sanity to arrays in the useRawSource object in the @vue-storefront/nuxt module:

// nuxt.config.js
export default {
  modules: [
    ['@vue-storefront/nuxt', {
      useRawSource: {
        dev: ['@vsf-enterprise/sanity'],
        prod: ['@vsf-enterprise/sanity']
      }
    }]
  ]
}

# 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/sanity/components/RenderContent.vue components/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/],
}

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/sanity'
// 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" />

← Content Creation →