Comparison of Vue Storefront for Magento and for Shopware

Comparisons don't always make sense

First off, comparisons like these don't always make sense. Shopware and Magento are two very different systems. For instance, the concept of Configurable Products in Magento somewhat resembles Product Variants in Shopware, but technically and functionally they are very different. However, this review is not about the backend system. It is about the frontend.

The same codebase? No.

On the frontend, both integrations are using Vue Storefront. Somewhat. This might lead you to say that there is some kind of Vue Storefront 2 core that is used in both PWAs. But this turns out to be not so. With the Magento 2 integration, some of the packages that make up the PWA are depending yet upon other common packages: For instance, the API client is written from scratch and it makes use of Apollo Client. But the composables package makes use of the generic @vue-storefront/core package. And the theme imports features of @vue-storefront/middleware, @vue-storefront/nuxt, etcetera.

On the other hand, Shopware PWA does not relie upon these generic Vue Storefront packages, it makes use of its own API client, its own base Nuxt theme, its own set of composables. The reason for this lies in the history of Shopware PWA. The Shopware 6 integration of Vue Storefront 2 was one of the first to be created. But when Vue Storefront 2 was considering a refactoring to make the code also fit with Shopify, BigCommerce, CommerceTools and in the end, Magento, at that moment the codebase of Vue Storefront 2 plus its Shopware 6 integration was picked up and pushed into a new separate project called Shopware PWA. (I hope that my interpretation is somewhat truthful.)

It is not the same codebase. But it is making use of the same thoughts, the same underlying technology (Vue composables, Storefront UI component library, NuxtJS application structure). And if you realize how different a product page in Magento is from a product page in Shopware, you should realize that this is entirely ok.

Parent/child theming

With Shopware PWA, one of the things that pops up right after you start working with it, is that your own custom theme is extending upon a parent default theme. The word theme might make you think that there could be a marketplace full of different themes out there, that could be installed with a mouse-click. So instead of theme, it is better to state that there are various component trees. Your own component tree and the component tree of the default theme are merged together, so that there is an opportunity to only override those components that you actually want to modify.

With the Magento 2 integration, there is only one theme: Your theme. It is a copy of the original theme created by the core developers. And there is no extending stuff, no overriding of components. This might sound like there is something missing. But it is so by design. Granted that you know Vue and that you consider creating new Vue components a very simply task, why bother with overriding a shitload of Vue components created by somebody else, if you are going to build your own component tree anyway. With that in mind, your own components don't need to rely upon the core components at all, they need to rely upon the composables that the core components are relying upon.

Still, you can implement something like a parent/child theme behaviour anyway. If you want. I've done already the hard work by creating a @yireo/vsf2-webpack-inheritance-plugin plugin that allows you to do so. If you want. But I would advise you to strongly consider building your own Vue component library first - and then integrate that with either Shopware or Magento.

The CMS

With both integrations, CMS features are available. With Magento (not the PWA, but the backend application), the CMS sucks and many have sought for alternatives. One alternative - PageBuilder - was first built by a third party vendor (Bluefoot CMS), then became part of Adobe Commerce and then was made available for all open source users as well. As of yet, the CMS Pages and CMS Blocks work fine in the VSF2-M2 integration, but PageBuilder is not supported yet (but planned for 1.1). Let's hope that this will not be as insane as the PageBuilder support in Adobe PWA Studio.

With Shopware, the CMS takes a much more prominent role: Not only landing pages are based upon the CMS, but category and product pages as well. Internally CMS pages are split up in CMS sections, which consist of CMS blocks which are containing slots in which CMS elements are inserted. At first, this might sound as rather complex, but if you conquer this complexity, the system becomes really flexible. In the Shopware PWA, all parts are backed by Vue components. All default logic is supported out-of-the-box. And new Vue components for additional third-party plugins that extend upon the CMS backend are created quiet easily as well.

PWA plugins

With Shopware PWA, the local PWA could be extended with PWA plugins that are either locally defined or downloaded from the Shopware Admin API if they are part of a backend Shopware plugin. These plugins are then able to insert their own components in specific PWA slots (Vue slots on steroids). With VSF2-M2, there is no such functionality. It requires you to own your component tree and make direct modifications to it. No magic, just Vue and Nuxt.

On the backend side, things could be extended as well of course: You could write your own Shopware plugin to extend the Store API and your own Magento module to extend the GraphQL API. Whatever you add to the backend, needs reflecting in the PWA as well. Both integrations offer ways to extend the API calls sent from client to server.

End-conclusion

All in all, it is nice to see how common technologies (Vue composables, NuxtJS, StorefrontUI) end up different in both integrations. With Shopware PWA, the focus has seemed to be to easily for new developers to get started - by overriding things, by installing new plugins. However, because of this, the deeper you go, the more complex it becomes. On the other hand, the Magento integration makes a hard assumption that you know Vue and Nuxt and want to build your own app, instead of having any magic happen.

There is something to say for both approaches, even though Shopware PWA sometimes frustrates experienced developers by doing too much magic. The Magento 2 integration feels a bit barebones, so really requires you to become a good NuxtJS developer first.

Apples and pears.