Modernizing Vue Storefront 1

Meet Capybara & Storefront UI

When I started to look into Vue Storefront, there was only the Default theme, containing weird CSS structures and huge Vue components. But with Capybara, which is based on Storefront UI, a lot has been cleaned up: Atomic design, clean components, separation of logic vs output, module registration override.

If you don't like things, modify them - it's just a theme. The Capybara theme also shows how simple the theme can be setup: A single main.scss as the starting point for CSS, plus a bunch of Vue components (well, a bunch, quite a lot of them).

Use Storybook

One of the reasons why you should use Vue, is that it is so dead-simple to create a new component. True, in Capybara, a lot of components also have - besides templating - logic. But most of this logic hooks into Vuex, which you can reuse in your own fresh Vue components.

How to get started with building your own Vue components? My advice: Use Storybook. Storybook allows you to setup all your presentational components step-by-step. And only once that's finished, you need to connect your code to Vuex - which is not hard if you do this properly.

Stay up-to-date

Within the Vue Storefront team, a couple of developers - among which Filip Jędrasik - are dedicated to improve Vue Storefront 1. The 1.12 release already brought many changes. But the latest commits of the Default theme and Capybara allow you to crank up the Lighthouse score up to 100. Don't say you don't want to use unstable code, because it is theming stuff that you are going to heavily modify anyway. Pick the cherries and benefit from them.

Parent & child theming

Do not copy an entire file. Instead, extend upon it. It took me 2 hours to come up with a sample theme that ships with a Webpack configuration to override things (plus some other tricks like extending the index.js entry file and merging routes).

Slow compilation? Use Webpack!

Are you falling asleep when the PWA is recompiling itself? Don't. But use that time to get my local Webpack configuration up and running, that basically turns off SSR locally and enables numerous Webpack optimization tricks to hugely improve compilation times.

Use the Composition API

While Vue Storefront Next is based on NuxtJS and nowadays support Vue 3, Vue Storefront 1 does only support Vue 2. You would say you would be missing out on features. True, some features are not there. But some features are. For instance, the Composition API is at your full disposal by using the compatibility plugin. And this means that you can apply the Composition API wherever you see fit. The Vue Storefront 1 core does not use it, but there's nothing stopping you from using it yourself.

Join the VSF1 training of February 8th 2021

On February 8th, 2021, a Vue Storefront 1 Fundamentals course takes place. If you want to get started with Vue Storefront 1, this training will give you all handles. Besides the tricks above, there is much more to discuss: What about tweaking replicas so your ElasticSearch single node is always green? What about performance optimization in general? How to efficiently use Docker without running too much? Hope to see you there!