With the growing popularity of Vue Storefront, we are aiming high. We’d like to become the industry standard for eCommerce frontends. This means duplicating the leadership status we’ve gained in the Magento PWA world across all other platforms, including custom backends. In order to do this, it is not enough to develop just a single product. Vue Storefront is, therefore, an ecosystem of open source products... and this is your quick and easy guide.

Vue Storefront

It all started in 2017 with Vue Storefront 0.1, released on Meet Magento NYC. We were first to the market with a stable solution that included most of the Magento features. The funny thing is that today, three years later, we’ve managed to maintain this status despite a growing number of other front-end solutions. We’re pretty proud of this but are even more enthused by our installment and customer base including 60+ production sites for such brands like Zadig & Voltaire, Tally Weijl, Lampenwelt, Danone, and others.

This community we’ve built, as well as the partners who have placed their trust in us, only strengthens our commitment to developing this product further.

The 1.12 and 1.13 releases we have planned for this year are huge investments in performance and developer experience. Version 1.13, in particular, will be a huge deal, as it includes the new Capybara Theme that will be the second default theme option for new sites running on Vue Storefront. It is based on our Storefront UI design system. We’ll shortly be releasing the Developer’s Preview of the Capybara theme and hope to gather the first feedback from developers and attract contributors.

The Vue Storefront core product line is here to stay for a long while yet. With the traction it has right now, we are just... shipping, shipping, and shipping new releases :) The important part of this process is to maintain backward compatibility. The Capybara theme, for example, will be distributed as an optional package/module that you can use or not. There will be no requirement to upgrade.

Storefront Cloud

We announced the release of our second product exactly a year after the VSF announcement; once again in NYC :) Storefront Cloud is a developer platform with a pretty strong value proposition: “It just works. No DevOps required.” Highly scalable, Kubernetes-based architecture, integrated CI and automatic deployments give your development team all they need to run a successful PWA. The power and ease-of-use of the platform have already attracted clients like Lampenwelt, Capezio and MDM. We’re continuously working on the developer experience, which means adding Github integration, dynamic pull-request previews, and some pretty cool UI-focused features. Last year, we changed Storefront Cloud pricing to make it much more affordable.

Find out more about Storefront Cloud 

Vue Storefront Next

The traction and the growing number of production sites, as well as the Vue Storefront core line stability, are the main decision factors behind our new R&D workstream, which we call Next. 

We’ve been bombarded with ideas for architectural changes and optimizations for Vue Storefront over the last year or so. However, we absolutely don’t want to force all existing users to go through the painful upgrade process. That is a sure-fire way of losing clients but not showing them the loyalty they deserve ;)

That’s why Next is a separate line with no upgrade path from Vue Storefront. Not that we actually think anyone needs to upgrade, as the key feature of VSF Next, the Storefront UI based theme, is already supported by the Vue Storefront Capybara theme.

We intentionally started this R&D stream with Commerce Tools and Shopware platforms integrated to not mess with the current installment base, which is mostly Magento.

The main purpose of Vue Storefront Next is to make third-party integrations easier as this architecture lets us use the native platform data formats instead of the unified Magento-like data format that Vue Storefront uses. It’s not using the middleware (required to overcome Magento API issues).

If you’re starting a new PWA project and it’s on Magento1 or Magento2, you’ve got only one choice: Vue Storefront. Don’t wait for Next as we have no current plans to add Magento support to Next. It’s simply not needed as Vue Storefront is here to stay.

If you’re going to run PWA on Salesforce, commerce tools, shopware or any other third-party platform better choose Next. It will optimize your built. 

If you’d like to check the progress of Next, please visit the shopware-pwa repository or next repository (which is for commerce tools)

Shopware PWA

This is actually the first implementation of the Vue Storefront Next architecture, integrated and optimized with Shopware. The cool part is the CMS integration with Shopware Experiences. I’d say it’s a pretty unique page builder experience applied to the headless architecture application using rendering pipelines and dedicated PWA components.

Vue Storefront CMS Integration

Storefront UI

Storefront UI was a side effect of the Capybara theme. We started work on the new theme in early 2019 but then put it on hold and shifted our focus to Storefront UI. The reasoning for this was simple: we wanted to make a really reusable, easy to customize design system that you can use with or without Vue Storefront (in custom apps). This is Storefront UI. It is based on Storybook, is easy to customize, and is modular in form (atoms, molecules, etc).

The community around Storefront UI has grown pretty rapidly and has even bubbled into separate small ecosystems attracting even more Vue.js developers. The funny thing is that we’re developing SFUI for React as well, though it’s not yet been published officially :) However, it works! So expect pretty exciting news soon.

Storefront UI is our common, standardized UI layer which is applicable to all the other frontend streams

Storefront UI  in VSF ecosystem

Storefront API

Storefront API and UI are parts of our ecosystem that can be used without Vue Storefront. SF API is a modular GraphQL and REST API which is 100% compatible with Vue Storefront. It originally comes from the `vue-storefront-api` project. We invested a lot into better GraphQL support and the modularity system.

It’s a great platform for modeling data. An extendable GraphQL resolvers system lets the user integrate different data sources (REST APIs, GraphQL APIs, Transactional Database Systems) into single, coherent GraphQL schema and implement the backend for a frontend design pattern.

TL;DR - key takeaways

As you can see, we’re working on a lot of cool things all at once. Luckily, we’ve got teams dedicated to each, as well as people overseeing the whole ecosystem, so we are able to put time and focus into each area while still working on the whole  :) 

Here are the key takeaways about the Vue Storefront ecosystem:

  1. Vue Storefront is the most stable, most popular PWA / headless solution on the market. You don’t need to upgrade your tech stack in the foreseeable future if you start a project on VSF. It’s here to stay and is being actively developed and maintained.
Vue Storefront ecosystem scheme
  1. Exciting new Vue Storefront features coming soon: Storefront UI Capybara Theme, performance optimizations. All backward compatible.
  2. If you’re to use a different backend platform for your PWA—especially commerce tools, shopware or SFCC—pick Vue Storefront Next. We’ll help you to integrate, so just contact us.
  3. Storefront API will replace Vue Storefront API, though the date is not yet set. You can try experimenting right away; it’s 100% compatible. The best part is that you can model the GraphQL data and integrate different systems all together via a single schema.
  4. Storefront Cloud is a FaaS (Frontend as a Service) platform, including 24/7 DevOps duties and VSF deployment best practices. It’s rapid and scalable, making it probably the best option for hosting sites based on Vue Storefront.