We are releasing a new template for Vue Storefront! Capybara, which is an implementation of Storefront UI, brings Vue Storefront to another level. However, please bear in mind that the current version is a preview for developers and is by no means the finished article. We are still looking for contributors, so if you want to join and help us to improve Capybara's performance or add new functionalities, don't be shy! Please feel free to contact us.

Vue Storefront is one of the best PWA solutions for eCommerce available on the market. Over 60 live sites have already implemented Vue Storefront and we are dedicated to maintaining the growth by investing massive resources in the development of the whole product line. 

After almost three years on the market, Vue Storefront is a mature and stable product but, if we are absolutely honest, its UI layer strays a little from modern standards… and that is putting it delicately. To be clear, Vue Storefront evolved so fast that the technology had to be front and center in our interests. However, knowing that the UI (and UX, in general) eventually becomes a crucial success factor of every technological product, we were aware that it couldn't stay that way for much longer.

With this in mind, a few months ago, we decided to redesign our default theme and create Capybara. It was supposed to be a quick job, and creating the Capybara Theme itself was, indeed, a short-term project. However, once we got that far, we immediately started to think if there was a way to make the result of our work more useful to businesses, not just to ourselves. 

We soon decided that, instead of creating just one template which is resilient to editing, we would build a whole reusable UI components library. This was the idea from which Storefront UI was born. The development of this independent, Vue.js-based library quickly gained momentum and is now one of the primary tools in the Vue Storefront ecosystem. 

The issue of the theme to VSF was not resolved and we had to come back to it. Our previous assumptions changed, however, because we now already had the Storefront UI at our disposal. This library became the foundation of the Capybara Theme and helped us create a real, unique template. This is because 90% of the code is closed in the Storefront UI library, meaning Capybara can maintain its flexibility but minimize the risk of errors. The user only has access to the library API, but not to the source code, which makes the interaction with the code possible only in the way that is indicated to the API. 

Being assigned to the project gave me an excellent opportunity to gain in-depth knowledge of the Vue Storefront architecture, but it was also a challenge. As I’ve already mentioned, Vue Storefront wasn't a flagship project at first and a quick review of the code shows that many developers were involved in its early stage, each with a different style and methods. There was also a lot of repetitive code. My job was to unify and simplify the code, which was a task that actually became a pleasure when I had a chance to work with a fantastic team of contributors like rmakara, gibkigonzo, qiqqq. I’m still grateful for all the work we did together. Thanks!

See the results of our efforts!

Components can be adapted to any requirements in a project with slots, which makes them very easy to use. Not to mention that the code is readable and concise while providing the expected results.
Based on the guidelines from Atomic Design, we have created components that can be used literally anywhere. By dividing them into atoms, it's easy to see which parts of the page can be reused and how they can be mixed and matched to create bigger molecules and the biggest organisms.
It is not always possible to use data directly from Vue Storefront. Before we send them to the UI components, we need to take care of proper data preparation with the usage of methods or computed properties. 

We are working on several products in the same ecosystem. Vue Storefront itself is, without a  doubt, the core; upgrading it was, therefore, naturally our primary goal. That is why Capybara is much more than just a design layer; we wanted to uplift the whole experience connected with the usage of Vue Storefront in terms of development, performance, and security. We haven't finished yet, but we hope the Developer's Preview will be a good sample of what we are heading for.

Rafał Makara, Project Lead at Vue Storefront

With the Capybara Theme, Vue Storefront is gaining an entirely new opening. In terms of development, it brings us closer to achieving the idea of code modularity and reusability; in terms of usability, it is all about customization-, mobile- and performance-first approaches. Those are the main advantages of Storefront UI and Capybara Theme, which is created entirely with the same philosophy. It will make the VueStorefront UI layer development more accessible, faster, and safer—while retaining that all-important flexibility.