One of the key USPs (Unique Selling Proposition — unique feature) of Vue storefront is that it might work with any eCommerce backend platform.

Fight between Carnival and Lent
“Fight between Carnival and Lent” is one of my favorite paintings. It’s not only an allegory of Life. It’s an allegory of designing the re-usable, generic framework vs. designing easy to understand, easy to use application. Boilerplate vs. Framework.

We do support quite many backends just outside the box:

… but there is a way to integrate your own, 3rd party platform as well. Well, there are basically three different ways to do so! This blog post is just about it.

Generic integration

The easiest and most popular way of integrating Vue Storefront with custom backend has been called “Generic integration”. It’s because this method is all about aligning the backend API and data formats to Vue Storefront generic data format.

generic VSF integration scheme
Generic integration

You might have seen that our data formats are pretty much similar to Magento formats. We’ve simplified them and aggregated them. Some parts are denormalized on purpose.

We’re trying to avoid the relations known from the standard databases and rather use the DTO concept. For example, Product is a DTO containing all information necessary to display the PDP (Product Details Page): including media_gallery, configurable_children and other features. It's then fairly easy to cache the data for the Offline mode and performance.

Read the full Product entity specification

The generic integration process is fairly easy, three steps procedure:

Read full step-by-step tutorial (including example JS code)

PROS:

CONS:

Direct integration

In some cases, Generic integration is pretty limiting. For example — product catalog. ElasticSearch layer has been introduced to Vue Storefront in order to speed up catalog querying. It was pretty important as the Magento1 and Magento2 APIs were extremely slow at the time. For the modern, API first platforms like Shopware6 or Commerce Tools — using an additional ElasticSearch layer is nothing but limiting.

Some of the eCommerce platforms do have dynamic sorting/recommendation engines bound to the catalog browsing features where using an additional buffer database (which ElasticSearch is) can prevent you from using these features in the first place.

To be not limited by the Generic integration strategy, Direct integration assumes that some core Vue Storefront modules will be replaced. Modules from a core that are tied to Magento logic should be treated as Magento only modules (and potentially moved to another repo/dir). I mean: catalog, cart, user.

You can replace these modules in the src/modules/index.ts the file without even touching the core :)

Every new integration should have its own modules for its platform-specific eCommerce/CMS/etc features (for example catalog-magento, catalog-shopware, cms-wordpress, cms-prismic etc)

By replacing the whole catalog a module you can easily replace ElasticSearch with just a direct call to the platform API, replace the REST calls with the graphQL calls and so on.

Storefront UI and Vue Storefront modules
Storefront UI and Vue Storefront modules

Additionally — one might want to put the Storefront UI on top of it (we’re currently working on SFUI based theme for Vue Storefront by the way)in order to add the additional UI abstraction layer.

PROS:

CONS:

Native integration

The last integration strategy is to just … well use just some libs (like Storefront UI) and components from Vue Storefront — but actually create a dedicated frontend application.

Storefront UI and Storefront
Storefront UI and Storefront

In this case, you’re not using much of the Vue Storefront code at all. Probably just the server app, SSR renderer, caching mechanism plus Storefront UI.

It can be the most optimal way of binding to the backend platform. It’s extremely fast, extremely low footprint.

By the way — this is our integration strategy of choice for Shopware6 (expect Developer Preview Release in January). It will be fully implementing Storefront UI with all it’s features and based on NuxtJS. The key reason was to leverage the full potential of Shopware Customer Experiences CMS. It’s like building a kind of new product (and this is a reason why Shopware6 integration will be released under theshopware-pwa by Vue Storefront). We’re super excited about it :)

PROS:

CONS:

Contact us

If you’re working on your own Vue Storefront integration and need some help — don’t hesitate to contact me via peter@vuestorefront.io