Vue Storefront Amplience

# Usage

Vue Storefront comes with the great public API (opens new window) that allows you to connect and integrate with any content delivery/management system. Usually using this API leads to connection with CMS JavaScript SDK that can be used as a bridge to build a universal data structure for content rendering.

Therefore, this Amplience integration provides composition functions called composables which use mentioned connection. Below you can find detailed instructions on how to use those composables along with your final application. Don't worry it's quite straightforward.

CMS Integration

You can read more about CMS integration process here (opens new window).

Now, import useContent composable to fetch and display the content from the Amplience.

import { useContent } from '@vsf-enterprise/amplience'

By using search method from the useContent composable you can get data from the previously created page.

const { search, content, loading, error } = useContent()
// run search() with id ot slug argument
await search({
  id: 'entry-id', // or slug
  url: 'entry-slug', // use for pages
  preview: 'none-cached-url', // optional
  locale: 'en', // optional
})
// then get the content
return content

# 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/amplience/components/RenderContent.vue 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/page/', '~/components/cms/layout/'],
}

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

# Custom content type search

As a final from version 0.3.0 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 search method. Like this.

onSSR(async () {
  await search({
    custom: {
      value: 'custom_field_value_to_search',
    }
  })
})

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 (opens new window).

You can read about creating components in Amplience here.

← API Reference →