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.
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
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:-
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.
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.
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
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
Performant box shadows