First of all, the dedication to Magento

So first of all, let's start with the most important message that Vue Storefront wanted to send out and the reason that I write this blog: Vue Storefront is not letting go of Magento.

They have already built numerous Magento integrations based on Vue Storefront 1. And the company behind Vue Storefront - Divante - is still building numerous projects based on the same product. While in some cases Magento can be replaced with other systems, there are still cases where Magento is the only right solution. Both Divante and Vue Storefront know this. Magento is part of the reason why Vue Storefront exists and this relation will not suddenly stop.

The problem: Moving forward

The real problem that Vue Storefront faces is that they have a lot of new ideas to move their ecosystem forward. Yet, how to do so without breaking backwards compatibility?

Vue Storefront 1 is a great system but it does have its flaws: Mixins in general are outdated, global events (via the event bus) are a bit confusing, the base theme is not using Storefront UI yet and Vue 3 is soon to be released while VSF1 will not be compatible with it without huge rewrites.

There's quite a list of improvements to make, but the last part of the previous sentence is most important: Without huge rewrites. Remember the huge rewrites of code that were needed when migrating from Magento 1 to Magento 2? Remember that nowadays there are still huge amounts of customers on Magento 1 that don't see the benefit of migrating to M2? Well, Vue Storefront wants to prevent this kind of situation.

There is legacy. Not necessarily because Vue Storefront 1 was built in the wrong way. No, because the VueJS community is so hyperactive that they are jumping ahead in the future. And Vue Storefront should keep up. But does this mean that all Vue Storefront 1 websites should break at the next upgrade?

The plan of Vue Storefront Next

No, we don't want Vue Storefront 1 sites breaking with the next upgrade. We want smooth upgrades. With all of the changes ahead, this will proof difficult: Vue 3 needs to be supported, mixins will need to be refactored into hooks, the event bus will be phased out - and these changes on its own already mean that stuff will break in your theme and modules, unless you update them as well. The move from VSF1 to VSF Next will not be an upgrade, it will be a migration.

But instead of forcing this upgrade on us with the next release of Vue Storefront 1, the core team came up with a different, more gentle strategy: They are developing Vue Storefront Next first, before making it compatible with Magento: An entirely new code base, based on NuxtJS, compatible with Vue 3 (cross-fingers?), a new architecture for modules (because of Nuxt), out-of-the-box support for SSR (because of SSR), the option to run things without a Node middleware (I feel another blog coming up) and hooks (or composition functions or whatever they are called today by the VueJS community). It is fresh and new. And it opens up for many possibilities.

And it is written from scratch. Why to write things from scratch? Read the Cathedral and the Bazar written by Eric Raymond. Excellent paper. A gradual migration of VSF1 code to Next is not the right way to get rid of the legacy.

Support of Vue Storefront Next

Now, instead of just jumping ahead and saying that Vue Storefront Next should be solely written for Magento 2, the VSF team has struck gold by also making good deals with Shopware and CommerceTools. Instead of just being a PWA frontend for Magento, they are becoming a PWA frontend for any e-commerce application. A very wise decision, I think.

However, because Shopware is almost demanding (no further intentions here) that the Vue Storefront Next app is working for Shopware 6 as soon as possible, the VSF team is focused on making that work first, before moving to Magento. Well, even CommerceTools, with a much less lower marketshare than Magento, gets priority over Magento. Why? Well, Magento already has this other Vue frontend available. And maybe we should let the other platforms deal with the early bugs of VSF Next, so we can migrate once the codebase stabilizes.

Rewriting Vue Storefront 1?

I think this is all a very wise move of Vue Storefront. However, there's a downside: Vue Storefront 1 seems to have become legacy already. Seems to. Because I don't believe this is entirely true. Vue Storefront 1 has some flaws and it might be less than the new Vue Storefront Next. Whatever you write today becomes legacy tomorrow. Additionally, many new ideas can be incorporated in VSF1:

Parent/child theming is something that the VSF1 app already thought of by allowing for Webpack overrides - I wrote a blog on this earlier. The Storefront UI library can therefore be easily integrated into your own theme-from-scratch, while still inheriting other stuff from the default theme. Likewise, GraphQL can be added to both your PWA and your API layer. Perhaps the new Storefront API (not be mistaken with the Vue Storefront 1 API middleware) might be compatible with VSF1 already to support this GraphQL usage? And while the code base of VSF1 still has some flaws (see above), the VSF team is dedicated to supporting this for a longer time (a bit vague but I don't know the exact timelines).

One fact remains: VSF1 is not based on NuxtJS. And Vue Storefront Next will partially be awesome, because of NuxtJS. That's what we are missing out on.

Moving from VSF1 to VSF Next

There are no guides yet to migrate, because VSF Next is not out yet and will not support Magento at first. Meanwhile, we can use VSF1 as before. However, simply by realizing what VueJS is and has to offer, you can already start modernizing your VSF1 app for the next move:

Make sure to create as many presentational components as you can, with as little advanced logic as possible. Add the Vue 3 Composition API to the Vue 2 codebase using the composition API plugin so you can start using the new hooks. Keep an eye on VSF Next as well, to see if some Next hooks can be reused in VSF 1 as well. And start using Storefront UI in VSF1. Or use some other library. These steps move your codebase forward.

Still, a migration will be needed. And this will require you to rewrite stuff. But hey, it is not Magento, it is not insanely complex, it is just a Vue app. Refactoring is much more a joy than a burden.

Conclusion

Vue Storefront does definitely not drop support for Magento. However, they are in the kitchen cooking up something real good (a spicy thing called Vue Storefront Next). And instead of declaring Vue Storefront 1 as obsolete, they seem to have turned it simply into a Long Term Support release (no guarantees from me here), so that we can build headless Vue/Magento environments on the short term as well - without a need to wait for Vue Storefront Next.

To my opinion, this step shows not that Vue Storefront does not care about the Magento community anymore. To the contrary, their move to work on new products while still supporting the old product, shows that they actually do care about the Magento community and that they based their decisions on exactly that dedication.

Disclaimer

I'm just a simple Dutch guy. I write what I say and I say what I write. I can be blunt. And all of the above is written with my own personal perspective on things, without the approval of Vue Storefront. Some of it might be biased, but aren't we all? Most importantly, I hope it is a nice read that makes you think about Vue Storefront stuff :)