Composable Headless: Bounteous Releases AEM Integration for Vue Storefront | AEM Community Blog Seeding

[kautuk_sahni]

Composable Headless: Bounteous Releases AEM Integration for Vue Storefront by Paul Rohrbeck

Abstract

Successful organizations are asking business units to collaborate on the design of customer experiences with their marketing and technology teams. According to Gartner, this need for greater flexibility is leading digital-forward companies to employ composable strategies to simplify and accelerate building experiences. In this way, they can scale the delivery of current and future business experiences.

Vue Storefront is a front-end platform for headless commerce that's been gaining popularity over the last few years. It has been a popular choice for the delivery of responsive web PWAs within a composable architecture. It already has a lot of integrations with commerce platforms and headless content management systems but one that's been missing, until now, is Adobe Experience Manager (AEM). With our deep knowledge of AEM and commerce, it was a natural fit for us to create the integration.

You might be wondering how Vue Storefront fits into your existing system architecture. Vue Storefront gets interesting when you have multiple different commerce and content platforms to support. With its existing commerce integrations to commercetools, Shopify, Magento, BigCommerce, as well as headless content platforms like Amplience and Contentful, you can quickly stand up a unified front-end experience. However, If you're mainly using Adobe with Adobe Experience Manager and Adobe Commerce (formerly known as Magento) it might make more sense for you to explore PWA Studio and its new headless content integration pattern.

AEM Extension for Vue Storefront
The AEM extension for Vue Storefront is provided as an NPM package, so installation is a breeze. Once you have it installed, you simply connect it to your AEM instance by configuring the AEM GraphQL endpoint and you're ready to go. Refer to our example repository for more details.

The Vue Storefront connector for AEM allows you to query AEM Content Fragments via the GraphQL API and render their content in your store. This gives marketers control over the homepage and key landing pages so that they can be authored in AEM. Create your own Vue.js components or leverage the great number of components already available in the Storefront UI library—simply create a Content Fragment model that matches the data required by the Vue components and you're good to go. Additionally, if you have the Commerce Integration Framework (CIF) Add-On installed in AEM, you can drive commerce components like a product carousel or teaser by authoring Content Fragments.

Read Full Blog

Composable Headless: Bounteous Releases AEM Integration for Vue Storefront

Q&A

Please use this thread to ask the related questions.