# What is Vue Storefront

Vue Storefront is a headless e-commerce PWA frontend framework that may work with any backend that you are already using via its API regardless of the platform, be it e-commerce, CMS, ERP, PIM, or anything else.

f_b

We mean by

  • headless : Your e-commerce platform as a whole system can be built on top of a set of different technologies. No mandatory combination for the platform is required. Manifestation of low coupling and high cohesion is here and will stay with us until the end.
  • e-commerce : Essentially Vue Storefront was born as the e-commerce framework. By the nature of headless and microservice, however, you might connect it to whatever you set it to, say, a helper service for ERP, or versatile search features for PIM, and portable checkout for 3rd party payment kiosk, and so on. Limit is your imagination.
  • PWA : PWA is the thing of future, it is designed to give best performance even on laggy mobile devices with native-like features from the beginning in order to satisfy your customers who are curious, rich, and impatient.
  • framework : Even though Vue Storefront is a set of atomic features, they should be guided as one by the conductor. We do so by gluing them through interfaces and factories. We will dig this further later, but one thing to take away, they are quite flexible glues.

Give me 7 minutes and you will grab :

# Technical problems

# Slow, unresponsive online shop

Vue Storefront solves slow, unresponsive online shop problems as follows :

  • The page load time reduced significantly on average including categories, products, and checkout and all that.
  • Major features were cached offline so poor mobile carrier performance isn't outstanding.
  • When connected back to online, suspended processes returns to work without noticeable hassles for customers.

Not only page load time but also responsiveness as a whole from the page was instant and seamless just as you would expect from a native app, if not better.

# Developer's dilemma for maintenance

# Unwieldy decisions

  1. How painful was it when you had to meticulously fix tremendous amount of changes without patterns while you just want to add/remove a simple feature, or upgrade the framework as they claim security risk is at stake?

  2. Another recall, how frustrated was it when you learned the other backend platform you didn't choose turned out better solution for your business, a lot better on many levels, but the cost of switching is even greater than the benefit of it you just learned? You were literally locked-in by tentative choices you made while you were naive.

Now, solution comes with Vue Storefront.

For the best experience when it comes to maintaining the framework, we divided the system into the smallest chunks until it's not meaningful to do so. Technically all parts are wrapped in as individual npm packages so switching from one version to another should be as easy as any npm command. In short, it has been built on the firm ground of Mircroservice architecture. It also means you can swap a part in the system with other equivalent app or service with a simple command. (or with a few changes in configuration)

# In a nutshell, technically

Vue Storefront is made up of 4 layers as follows :

templates_d

Data Layer : API Client - This provides a friendly abstraction layer for your e-commerce backend over network.

Service Layer : Composables - This contains business logic in Vue.js framework

Presentation Layer : UI Components - Vue Storefront has already launched its sister project Storefront UI helping you build your UI and theme hands down.

Framework Layer : Nuxt - Nuxt works as a glue for all the framework components even though it's not a must-use.

Vue Storefront is a set of independent npm packages taking various roles of the framework. It's really up to you how much of the framework you will use in your project. You can cherry-pick any combination to your advantage.

TIP

Vue Storefront packages are standalone which allows you to use them in any Vue.js enviroment so it's not a must to use Nuxt. You can use Vue Storefront packages with Vue CLI or even within your custom Vue.js codebase. All you need is know how to communicate with Vue Storefront, which is done via interfaces over API.

# Backend Integration

Vue Storefront is a frontend framework undoubtedly. It needs an e-commerce backend to fully function in its glory. Here is the list of e-commerce platform integrations already out in the field.

  • Commercetools (Stable beta)
  • Shopify (Developers Preview)
  • About You Cloud (Developers Preview)

We will walk you with details of each integration in its dedicated guide.

# Benefits you take

  • Blazingly fast frontend
  • Ability to work with any eCommerce platform, CMS, ERP, PIM under common, agnostic API
  • Server Side Rendereing
  • Progressive Web App features
  • Huge flexibility in changing third-party services thanks to agnostic data formats

# Tech stack