In the mobile-driven world, many businesses were at risk of poor performance on mobile devices. Realizing the situation, Divante set the goal of preventing this disaster. They use cutting-edge technologies such as Vue.js and PWA to assist their partners in creating mobile-first experiences. They made Vue Storefront and became a pioneer PWA solution provider in the eCommerce industry with this idea in mind. You can explore the demo of Vue Storefront for Magento here and experience yourself what it delivers.
Content
About Divante Company
Divante is an e-commerce technology firm with over 12 years of experience. They have worked with global organizations like Bosch, SAP, and Tally Weijl, serving both the B2B and B2C clients.
The company headquarters is in Poland. Their primary business partners are Magento, SAP, Shopware, Pimcore, Akeneo, commerce tools, Vue.js, and Symfony.
Vue Storefront’s PWA Frontend For Magento
Vue Storefront was created in 2016, officially released in 2017, and has constantly developed since then.
It is an open-source eCommerce PWA frontend framework that works with any eCommerce backend API, regardless of platform. At present, it supports Magento, Shopify, Commercetools, Spryker (Beta), and Salesforce Commerce Cloud (Beta).
However, in today’s post, we only examine Vue Storefront’s PWA frontend for Magento.
1. Technology
Vue Storefront is built primarily on Vue-related technologies in which the most important one is Nuxt.js.
Since this PWA frontend platform is not aimed at Magento users only, it cannot use the official Magento PWA Studio tool. This is both a good and bad thing. On the one hand, it means that Vue Storefront is highly flexible. On the other hand, it might find it hard to compete with other Magento PWA themes based on the PWA Studio, such as TigrenPWA, GoMage, Simicart, etc.
If you don’t know, PWA Studio versions are always updated parallelly with Magento versions. So, all the PWA themes for Magento using PWA Studio can update themselves quickly right after Magento release a new version. On the contrary, the other PWA storefront development solution – like Vue Storefront would definitely be slower since it cannot know what Magento will bring.
Vue.js
Vue.js is ranked among the top 3 major frameworks for building progressive web apps, after React.js (by Facebook) and Angular.js (by Google).
Although Vue is a fast-growing framework, it hasn’t had a big community, and the current number of Vue developers is not significant.
Therefore, we are more inclined to the PWA frontend solutions that apply React or Angular, which helps to find development companies easier as well as get help from the community when needed.
Nuxt.js
Nuxt.js is built on top of Vue.js and handles server-side rendering, routing, and internationalization.
REST
When it comes to API request-response, Vue uses REST, which falls short of users’ expectations for efficiency. GraphQL does this better when it can call multiple queries at once.
2. Design
The default theme is built on Storefront UI, a design system for e-commerce. If you don’t want to utilize it, you can change the templates in the Vue files to use any other UI library or custom components instead.
It is the first Vue.js-based collection of fully customizable UI components for e-commerce firms to build storefronts quickly without messing with the backend.
We found several demos of Vue Storefront.
- Demo 1:
Desktop
Despite utilizing a powerful system, the default design of Vue Storefront for Magento is not really attractive. It’s too basic and quite boring, in fact.
As you can see, it does not have an advantage of design, especially on desktop.
We think that it is geared towards mobile screens only. The header, menu to the shopping cart on the desktop view all look like an enlarged version of mobile.
Vue Storefront should spend more time improving its design, both on large and small screens.
Unlike other Magento PWA themes, it seems that this demo is not “ready-to-use,” as lots of customizations will be needed. In other words, it only helps us to partly understand how our PWA would work if we apply Vue Storefront for Magento instead of knowing how our PWA would look like.
- Demo 2:
With a similar style, but the below demo is much better.
Mobile
The basic design of Vue Storefront is clearly more suitable for the mobile view than on desktops. Another plus point is the typography and color palette. If you are seeking the minimal style for your Magento store, you would love it.
3. Functionality
Basic
Like other PWA solutions, Vue Storefront boosts your eCommerce with all PWA characteristics in a single installation: lightning-fast performance, offline capabilities, and an app-like appearance and feel.
However, one of the most visible weaknesses of the Vue Storefront is that currently, it does not support the full key functions of Magento e-commerce stores.
Things might get worse when Magento releases new versions with more upgraded features in the future.
Advanced
Aside from core eCommerce functionalities, you can add third-party extensions available as Vue Storefront modules. They simplify and shorten integrations with trusted third-party solutions, such as social media, payments, or voice commerce support for voice-based user agents like Amazon, Alexa, etc.
4. Costs
Theme
Vue Storefront is an open-source theme published on Github. It is inclusive of a simple default design and the above-mentioned basic features of an eCommerce store and a PWA.
Installation
Since it is zero-cost, you can download set up it on your own if you are tech-savvy. It costs you nothing unless you hire a developers team to do this.
Customization
Briefly, Vue Storefront for Magento’s functionalities and design is simple and cannot be directly applied to your site without customization. If you want your eCommerce store to stand out from the rest, you should ask for help from PWA experts.
This service cost will differ depending on your specific needs and your selected developer team as well. However, if you want to have Vue Storefront developers (from Divante company) work on your project, let’s well prepare your budget. As far as we know, most of their clients are big brands, so that they might charge a high price for all projects.
5. Updates & Support
You might find out that Vue Storefront has the most vibrant community with lots of members on Github and Discord.
Whenever a problem arises, you can get support from the other users or developers in the community by posting questions on Vue’s forum or Github. With such a large number of people, it will not take you a lot of time to get an answer.
Needless to say, the support from its strong community is its greatest strength.
6. Documentation
Vue Storefront has published some valuable documentation.
They are written in detail, giving lots of important information about how to install Vue Storefront and integrate it with e-commerce platforms.
However, we can find the list of supported/ unsupported Magento core features like ScandiPWA or TigrenPWA’s documentation. As a result, it would be quite vague for both developers and Magento stores to know which functions are missing to re-build.
7. Others
Compatibility
Vue Storefront can work with Magento 1 and Magento 2, while other PWA themes are for Magento 2 only.
However, given all of the benefits of Magento 2 and that over 80% of Magento 1 websites have been upgraded to this edition, the extended compatibility of Vue Storefront seems to be redundant.
Outstanding Projects
Thomas Kent
It is a well-known wall clock brand in the UK. Thomas Kent picked Vue Storefront as they needed a mobile-first approach.
With the PWA power from the storefront, the brand conversion rate increased by 77%, and its site reaches a loading page time faster by 54%.
Zadig & Voltaire
Zadig & Voltaire, a well-known French fashion brand, was one of the first merchants to choose Magento in 2008.
The business sought to improve its speed and flexibility to make customized offers to customers across all markets. The company’s plan involved embracing the potential of PWA by using Vue Storefront to meet all of its goals.
After the integration, Zadig & Voltaire’s site witnessed an increase of 72% in mobile conversion rate and 67% of monthly active users on mobile.
TALLY WEiJL
TALLY WEiJL is a Swiss fashion house with a global presence that was founded in 1984. They began their global expansion more than a decade after their founding, and by the year 2000, they had over 50 stores across Europe.
The brand wanted to work smarter and discover a solution that would allow them to make frequent, mobile-friendly upgrades to the UX layer without making major, dangerous backend modifications. Then, they decided on Vue Storefront.
It contributed to a 131% rise in mobile revenue and a 140% increase in the company’s conversion rate.
Wrap Up
Vue Storefront is a mobile-first eCommerce frontend that lets you create lightning-fast eCommerce websites and apps without having to change your backend platform. And it’s free.
However, it does have several downsides that we have discussed. For example, it is not based on Magento PWA Studio a number of Magento core features are missing. Also, the cost for implementing the theme by Vue Storefront developers might be high.
You should consider all the factors before deciding whether to go with this PWA solution or not.