Vue Storefront 2.0 and Theme 2.0

The default theme has served us well for a long time, but we have learned a lot in the last two years and now we want to turn all those lessons learned into code. This is why we are working on Theme 2.0 (I’m sure in the meantime we will come up with a better name).

What is Theme 2.0 and Vue Storefront 2.0?

Theme 2.0 is a completely new Vue Storefront default theme, written from scratch and aligned with our plans for future Vue Storefront architecture.

Vue Storefront 2.0 is just the evolution of the current core with a focus on seamless upgrades, easier setup, and better learning curve. The main difference introduced in Vue Storefront 2.0 is moving the whole core<>theme communication to Vuex stores and better encapsulation of modules. By having one layer of communication, core logic can be completely separated from theme logic which will make its customization and upgrade much easier.

We also plan to make some upgrades for the modules registration API to make them lazily loadable. This change won’t affect internals of any currently existing Vue Storefront module though, and they should be able to use the new APIs without any internal changes.

How will Theme 2.0 look?

More about designing a new Vue Storefront theme in the interview with Sveta Havaka.

Theme 2.0 will be based on Storefront UI — a customization-first library of Vue components dedicated to eCommerce and crafted by the Vue Storefront team and contributors.

Theme 2.0 is meant to provide the best out-of-the-box experience with a mobile-first design. It is based on the Google UX Retail Playbook to ensure the best possible User experience. We want to give developers the ability to customize the design in any way they want while keeping it upgradable, in contrast to the current theme.

Here is the list of key goals we want to achieve in Theme 2.0:

  • Best out-of-the-box experience
  • Mobile-first components
  • Ability to customize any aspect of the UI without losing upgradability
  • Great performance
  • Simplified theme structure
  • No need for breaking changes in the future
  • Great documentation
  • Lower learning curve
  • Highly requested theme fallback system

What about backward compatibility?

Even though we are moving the communication layer to Vuex and resigning from core pages, they will still be maintained and adjusted to changes so everyone using the old Vue Storefront theme can still receive updates . If you’re already using Vue Storefront in your shop, those changes are not gonna affect you more than regular updates. It’s important to mention that we want to introduce new APIs step by step with each new release so Vue Storefront 2.0 is not gonna be completely new software but just a final step inall the incremental improvements.

Also, the Vuex state data formats will remain untouched. We will only provide additional actions and getters.

When will it be released?

We plan to release the Theme 2.0 MVP along with part of VS 2.0 Vuex improvements later this year. Exactly when mostly depends on the number of contributions from our community. The core team is working hard on improving Vue Storefront, preparing it for version 2.0, building Storefront UI and Theme 2.0. If you’d like to help with any of those, we’d be more than happy to guide you. Let’s build a better Vue Storefront together :wink:


we are waiting for theme 2.0 :grinning: