Connect your Vue Storefront instance with the headless CMS : PRISMIC

Last month Dn’D Agency released Vue Storefront — Prismic Connector. Along with the developers’ team, we take a look at the integration process, and benefits of this a headless CMS that you can now use to manage content in your Vue Storefront store.

Vue Storefront — Prismic connector

The connector is providing two main features :

• Retrieve and display Prismic CMS blocks on Vue Storefront.
• Retrieve, display and access Prismic CMS pages on Vue Storefront.

To do so, the connector is split in two different extensions that you have to install on your Vue Storefront and Vue Storefront API instances.

On the Vue Storefront API side :

The API part of the connector is using GraphQL to override the schema and add two new entities: `prismicCmsBlocks` and `prismicCmsPages`. Those new entities allow you to query the CMS block and the CMS page data of Prismic from Vue Storefront API. The connector is relying on Prismic native API to fetch the data, you will have to add the API definition in your config/local.json configuration file:

“prismic”: {

“baseUrl”: “https://dnd-vsf.prismic.io/api/v2",

“cmsBlockEntityType”: “cms-block”,

“cmsPageEntityType”: “cms-page”

}

On the Vue Storefront side :

The front part of the connector is implementing the functions needed to call your CMS blocks and your CMS pages.

Call a CMS block :

• You can call a single block by its Prismic identifier :

import PrismicCmsBlock from ‘src/modules/dnd-prismic-cms/components/CmsBlock/View.vue’

//…

<prismic-cms-block :identifier=”’banner’” />

• Or call a block collection :

import PrismicCmsBlockCollection from ‘src/modules/dnd-prismic-cms/components/CmsBlock/Collection’

//…

<prismic-cms-block-collection :identifiers=”[‘banner’, ‘reassurance’]”/>

When you call a collection, the blocks will be displayed one after another, following the order of the given identifiers.

Call a CMS page and register the slug :

• You can call a CMS page the same way as a block using its slug instead of the identifier:

import PrismicCmsPage from ‘src/modules/dnd-prismic-cms/components/CmsPage/View’

//…

<prismic-cms-page :slug=”’summer-promotion’” />

• You can register a page in the router to get it called on its slug, in the file src/themes/default/router/index.js:

import PrismicCmsPage from ‘src/modules/dnd-prismic-cms/components/CmsPage/View’

//…

{ name: ‘demo-prismic-promo’, path: ‘/summer-promotion’, component: PrismicCmsPage, props: {slug: ‘summer-promotion’} }

• Auto register pages from Prismic, based on their slug attribute:

To enable the CMS page registration you will have to add the following line in your src/themes/<app_theme>/router/index.js at the end of routes var declaration:

{ name: ‘prismic-cms-page’, path: ‘/:cmsSlug’, component: PrismicCmsPage }

Build your own custom type and retrieve it in Vue Storefront

As every implementation of Prismic is different for each customer, we made sure to make the connector flexible and easily extensible for your custom needs. For example, you can retrieve your custom slice types with some quick customization on the connector :

• Include your slice type in the Slice helper (helpers/slice.js)
• For example, if you want to add a slice named rich_text, with only a text field, you will add a case with this type in the parse method :

case ‘rich_text’:

return PrismicDOM.RichText.asHtml(slice.primary.rich_text)

• In each case, you can access the slice content (refers to Prismic official documentation for more details) and build your html according to its content. The PrismicDOM.RichText helper is also available to parse the contents that are using rich formatting.

Documentation, contribution, and useful links

You can find the connector and the documentation at the following links :

• Vue Storefront API — Prismic Connector Github repository :
• https://github.com/Agence-DnD/vue-storefront-api-prismic-connector
• Vue Storefront API Connector — Documentation :

https://github.com/Agence-DnD/vue-storefront-api-prismic-connector/blob/master/doc/summary.md

• Vue Storefront — Prismic Connector Github repository :

https://github.com/Agence-DnD/vue-storefront-prismic-connector

• Vue Storefront Connector — Documentation :

https://github.com/Agence-DnD/vue-storefront-prismic-connector/blob/master/doc/summary.md

Do you want to request a new feature? We would be pleased to hear about it!

You have developed an improvement for the connector? Use the pull request section on the Github repositories to propose your work!

You have found a bug on the connector? Our developer team will do the best to provide you support and a bug fix in the issue section on the Github repositories!

Discover Dn’D Agency :

With 15 years of experience assisting companies in the creation and development of their eCommerce platforms, the Dn’D Agency is looking forward to taking up new challenges and to provide innovative solutions to our customers. Lately, our development team has been working with Vue Storefront PWA on side projects and its integration with Prismic.

Learn more at:
www.dnd.fr
Dn’D Agency’s Vue Storefront API — Prismic Connector release article.
Dn’D Agency is the first Vue Storefront Core partner in France