Diving into the technical sessions from the Vue Storefront Summit

Additional Collaborators: Radek & James

Prior to the Vue Storefront Summit, one of the main questions in our minds was what do the Power Rangers and the new Vue Storefront architecture have in common? See, we knew there would be a session called the “Be the Zordon of ecommerce” (...and to bring him back to memory, he’s the character Bryan Cranston played in the Power Rangers movie - their mentor), but what did this have to do with ecommerce?

Our deep dive into the more technical sessions of the Vue Storefront Summit will provide answers and offer insights into Vue Storefront 2 and updates regarding platform integrations like Shopware’s PWA. For more information, have a look at our summary of the event

Bodiless architecture - how it works

To explain the new bodiless VSF 2 architecture, Patryk Andrzejewski, the Technology Leader at Vue Storefront, found a great metaphor - the Power Rangers. Vue Storefront itself was turned into Zordon, which is the head without a body. 

So here’s what we learned: 

Let’s look further into some of these components: As we can see Nuxt.js sits at the base of everything. Nuxt.js is a framework built on top of VueJS. It can be used to create a universal or single page Vue app with server side rendering perfect for use in an ecommerce application.


The core of Vue Storefront 2 contains utilities and factories used by composables (which we look at shortly), that allow common high-level APIs for each platform. This allows developers to use the same composables for each integration.

Examples of factories include:

useCartFactory, useCategoryFactory, useWishlistFactory etc

Within the factories are methods that can be called, e.g. addItem or removeItem within useCartFactory.

The following diagram shows how we can use useCartFactory from the core passing it UseCartFactoryParams which returns a useCart instance.

We can use useCart to:

For more code examples see the Vue Storefront 2 docs at


API Client

The API client allows us to get API functions from the underlying integration by getting its context. We can do this with useVSFContext.

Each integration has its own methods that can be invoked.

In the example below we can see we are using useVSFContext to access the API client and then calling getProduct with an id of 1.


Composables are the business logic layer that sits over the API client layer.

Each composable is responsible for interacting with the ecommerce integration.  Vue Storefront 2 contains the following composables

Each composable essentially exposes three features:-

  1. The main data object, e.g useProduct yields a products object
  2. The main function that interacts with the data object e.g. search is the main function for the products object.
  3. Supportive data objects, for example isAuthenticated form useUser which relies on the users object.

In this way the composable can be used within an ecommerce solution to show products, add items to the cart, manage order processing and much more.


The VSF 2 middleware is an Express server that proxies requests from the UI, translates them to a given integration and calls the appropriate API.

One of the main reasons this was created was that it allows for further extensibility (we will see more about this below). Developers are able to more easily modify requests and responses. 

Security is also a plus point, as all of the credentials are stored server side and not exposed to the frontend.

Also, now the networking layer is moved to the server side, there are performance gains to be had as the code shipped to the browser is smaller resulting in a faster initial page load time.

Middleware extensions

To summarise...

The new API architecture is based on the Nuxt.js server side middlewares & Express.js server - this means that it’s easy to write new server side code (API calls/logic for new/existing integrations) in the VSF@Next app and use that logic on the front-end part (as nuxt provides both sides - Back-End & Front-End in one application). 

In addition composables architecture offers great opportunity to use some logic (e.g add to cart method) in an easier way than in Vue Storefront 1 by importing required composable and using it for current case - resignation from importing mixins and copying parts of the code that we want replace/edit. 

Shopware PWA Updates

You may have read our previous blogs and maybe even our Shopware Partner Day update. As we are working on a Shopware PWA project currently, this talk by Maciej Kucmus, the Shopware PWA lead, was one we had to attend. 

Project’s Update + Setting up the local environment


Setting up local environment

Dockware! → Ready to use Shopware docker images https://dockware.io 

Vue Storefront 2- Custom Theming

The last session we wanted to share our learnings on is one that was held by Aditya Patel, Director of Product and Growth at HotWax Commerce. He highlighted how Storefront UI could be leveraged for custom theming and building faster.

Here’s what we learned:

Problem - Building an ecommerce Theme, most expensive part for brand and agencies

Component libraries are hard to customise. Ideally we would like to have reusable components.

If we use UI libraries they tend to only have atomic components, and as developers we still have to build ecommerce components and don’t have a good developer handoff process.

Looking at the main pages for Nordstrom, FootLocker, Nike and Steve Madden,  all of these sites largely feature the same components:

Storefront UI features basic atoms which can be used as building blocks.

In this way we can create molecules and organisms all of which are customizable domain specific components.

As Storefront UI is open source and community supported maintenance is easier, i.e. a problem shared is a problem halved!


Tiers of customising Storefront UI

Basic Branding and stuff

Customise with slots

Build your own components

Pro tips


Performant box shadows

Saas breakpoints

Related Reading

Get in touch. Email hello@gpmd.co.uk or call +44 20 7183 1072.

Sign up for our newsletter