At last, Vue Storefront 2 integrates with Magento

The roots of Vue Storefront 1 ... and its legacy

Vue Storefront 1 started as a need for the Polish company Divante and because it worked for them and because they felt it could help out the community, they made it open source. 2017 was the year when Magento 2.2 was released. Everyone in the Magento community felt that the Luma frontend was overly complex and people were disappointed in the number of bugs in Magento 2 itself. The time was there for headless: Vue Storefront, FrontCommerce and DEITY stepped up, while Magento itself was slowly considering something headless as well (without the GraphQL API having been released yet).

But Vue Storefront 1 was the first to open source its solution. And many liked it. But some disliked it: If you were new to Vue, the amount of code was staggering. And various parts were hard to go through: Components contained too much logic, the SSR mechanism was flaky, the requirement of ElasticSearch was frowned upon (well, have you been upgrading to Magento 2.4 already?) and the overall argument that Vue is simple did not apply.

This made people try out Vue Storefront 1 and then run away. However, the people that I met that already had a solid experience with Vue, just shook their shoulders and stated that it was better than working with Luma.

Fast forward to today

Today, the Magento landscape has changed quite a bit: Luma is considered by many (well, everyone that is up to date and realistic (pun)) outdated. There are options like Breeze and Alpaca out there as well, but the main interest goes to Hyvä and Adobe PWA Studio. Yes, Vue Storefront is not listed here, because before recently there was no Vue Storefront 2 integration with Magento 2 yet.

And that integration has now reached its stable. And its new architecture is definitely a reason to reconsider Vue Storefront 2. Let's take a look at the integration. And let's take a look at some caveats as well.

The core of Vue Storefront 2

The core of Vue Storefront 2 is based on NuxtJS 2 and because of this, there is a wealth of features available without doing much: It covers fundamental features (pages, routing, layouts, state, performance optimization, SSR, an easy dev environment) but also leads to many optional NuxtJS as well (GTM, content, Google Fonts, social media). Thanks to NuxtJS, the architecture of Vue Storefront 2 makes sense now.

But on top of NuxtJS, there is more magic: SSR includes caching. Numerous NuxtJS modules are preconfigured in the right way. An API client connects to the Magento 2 GraphQL API and Vue composables are wrapping itself around this to offer specific features (category fetching, product details, add-to-cart, login, etcetera). And finally, the components are just built on top of that, importing the composables and outputting whatever you want. However, this is where the first caveat is about.

Caveat: Write your own components

As a Magento developer, you are used to build a child theme extending a parent theme. It makes things easy. You modify some CSS, you modify some template and you're done. And if you find out that you are overriding 90% of the original theme, no harm is done. With a component-based architecture like with Vue, this is different. Instead of extending, components are composed: One component on top of another. Using Webpack tricks, you can override individual components (which kind of resembles parent/child theming but it's not) but the main concept is that you can just move components around, wrap your own component around existing ones or skip existing ones as well. You are going to take ownership of your own component tree.

I've heard people already complain about the usage of Storefront UI component library within Vue Storefront. As if Vue Storefront forces you to use Storefront UI. That's not the case. The Vue Storefront integrations come with a default theme and that theme is based on Storefront UI. But if you are going to customize the look & feel for your own project, reality is that you are going to rewrite 90% of the existing components. And because of this, you are better off creating your own components.

This sounds harsh, but it's actually how you should kickstart your own Vue project: Start with writing your own presentational components first, so that they reflect the design you are after. And then add logic. It's actually there where the work of Vue Storefront is the most useful: In your own components, you would be importing the composables of the VSF2 core. You are not reusing Vue Storefront for its simple parts (those parts that you can write yourself), you are using it for the complex parts.

Caveat: You need to like Vue

If you opt for Vue Storefront, you need to like Vue and NuxtJS. Period. I've seen people jump on top of Vue Storefront without having a clue of what Vue and Nuxt are about. That's the same as starting with the Luma checkout without having a clue of what KnockoutJS actually is. Start with the basics first. And see if you like it.

This is not some highschool where you can hate the system for bringing you something you don't want. If you like something else (Hyvä, PWA Studio) more than Vue Storefront, don't bitch about Vue Storefront: Vue Storefront is not created for people that don't like Vue, it is created for people that love Vue. Just accept the fact that people are different, therefore individual flavors are different too.

Here be dragons

Put aside the caveats, the Vue Storefront 2 integration with Magento 2 is great: It is feature rich. I'm not saying feature complete, because this will frustrate people that suddenly expect literally all the features of Luma to be included (including the ones that are stupid, dumb and never used). Its composables are great.

And it contains some overriding features. For instance, for customizing GraphQL queries, there is an overriding mechanism in place (through middleware). Overriding components is only possible with a custom Webpack configuration. So it really assumes you will be going the route of creating your own component tree.

All in all, the features are there, the composables are there, the sample components are there and all is working stable. I guess future releases will still add many more features, perhaps features that you are still waiting for. The major work is done.

Let's play

This was something that a lot of people were waiting for: The integration of Vue Storefront 2 its new architecture with Magento 2 GraphQL. That wait is now over. Let's start playing!