Vue Storefront Magento 2 PWA Review: Exploring The Future of E-Commerce Stores 

The global e-commerce market riches new and new milestones every year. At the same time, it incorporates the latest achievements from the software field to accelerate the growth and satisfy the consumers’ steadily rising demands. Each e-commerce platform tries to offer something unique in terms of user experience. However, Magento 2 is the leading solution. The platform not only provides strong possibilities out of the box and enables numerous customizations based on third-party extensions, but it also lets you create absolutely new customer experience due to the headless approach. You can either utilize the native Magento 2 PWA Studio or rely on one of the third-party alternatives. Today, we describe one of the most popular progressive web applications. Meet Vue Storefront – ultrafast, offline-ready, and platform-agnostic PWA that expands the user experience of Magento 2 to an entirely new level.

Brief PWA Explanation

If you are not familiar with PWA, we describe this technology below. Progressive web apps incorporate such features as fast load time, accessibility in unclear network conditions, engaging user experience, extra reliability and availability. When it comes to Magento 2, they enable you to use the platform’s backend to create an entirely new frontend on top of it. 

Unlike a default e-commerce website, a PWA storefront can be saved on a homescreen of your device as an application. However, when you open the app, it is possible to share its content as regular store pages via URLs. And if there is no internet connection, offline mode turns on. However, it can only display the content that has already been reached online. 

So, progressive web apps are fast, reliable, sharable, and available offline. From the perspective of Magento 2 PWA, you can get all these advantages over the default experience along with the platform’s benefits and strong points. It is only necessary to choose a PWA solution to create your new e-commerce website. Let’s see what advantages the Vue Storefront Magento 2 PWA offers.

Before going any further, let’s discuss one more nuance. If you need to migrate to a PWA Magento 2 website, you need a third-party solution since the default import tool does not support most entities and several mechanisms that dramatically simplify data transfers. Since the Improved Import & Export Magento 2 extension is frontend-agnostic, you can use it for all Magento 2 PWA solutions.

General Information

In this chapter, we highlight some critical aspects of the Vue Storefront Magento 2 PWA. Let’s take a look at the stunning development experience the project offers.  

Development experience 

As a developer, you get a very friendly instrument for creating e-commerce websites. Vue Storefront offers the following key perks:

• PWA as a standard. Your only rule when you rely on this project is PWA. Vue Storefront lets you develop mobile and web apps all at once without traditional headaches related to bot types of storefronts. 
• Modern technology stack. With the Vue Storefront Magento 2 PWA, you deal with the most flexible framework and the latest technologies to create faster stores in less time.
• Microservices. The PWA solution relies on top-notch technologies. For instance, it incorporates microservices to enable lightning-fast frontends. 
• Headless architecture. Since Vue Storefront is platform-agnostic, you can use it not only with Magento 2 but also with other backends. Furthermore, it is possible to switch between platforms without changing the frontend.
• Production-fast frontend. You can push your project to production as fast as possible. At the same time, the platform-agnostic nature of Vue Storefront lets you keep it flexible and scalable.
• Work-ready solution. The Vue Storefront Magento 2 PWA offers all standard e-commerce features out of the box. However, you can add as many new enhancements as your business requires. 

Key features and benefits 

The Vue Storefront PWA offers top Lighthouse rates. According to the project’s official website, it has got 97 points for accessibility, 89 points for performance, and 92 points for SEO. Thus, a PWA website can significantly improve your conversion rates and engagement. At the same time, it lets you decrease bounce rates. To achieve these goals, the Magento 2 Vue Storefront PWA offers push notifications, home-screen access, and full-screen mode to name a few.

Moreover, you can leverage support for offline mode, providing your customers with access to it in offline mode, with a poor connection, on any device. Of course, your customers get 100% responsive and smooth shopping experiences while you don’t need to create a bunch of applications for different web browsers and operating systems. You Magento 2 Vue Storefront is suitable for all screen sizes and platforms. 

Another thing we enjoy about Vue Storefront is that it is powered by the community. Numerous professionals of different levels and experiences push forward the PWA technology turning development into an enjoyable and more productive experience. More than 2k+ developers work on the project on Slack. 180+ active contributors regularly participate in the development. Over 50 partners actively support Vue Storefront and the community around it. `

All PWAs for ecommerce provide the best user experience on the frontend without sacrificing the backend of your choice. However, Vue Storefront offers several significant advantages. First of all, it is production-ready. When we discovered the project for the first time, it was a basic implementation of the headless concept. Now, it is a fully-featured tool with a growing number of integrations and add-ons. As we’ve mentioned above, it is platform-agnostic, so you can leverage APIs to connect it to literally anything. However, Improved Import & Export dramatically simplifies integrations if you use Vue Storefront with Magento 2, of course. As for the native opportunities, they look promising as well.

When it comes to the flexibility and scalability of the project, Vue Storefront offers support for the following technologies and services:

• GraphQL provides a new layer of abstraction to simplify integration with third-party services; 
• You also leverage PayPal out of the box;  
• Voice commerce integration lets you add voice user interfaces to your frontend (Amazon Alexa, Google Assistant, etc.); 
• Chatbot assistance is in progress as well as numerous other extensions and add-ons.

Another benefit that is worth your attention is that Vue Storefront is a market-proven solution. It already includes 20+ live projects. Thus, you minimize risks with the Vue Storefront Magento 2 PWA.

Vue Storefront & Magento 2

As for our favorite e-commerce platform, Vue Storefront lets you implement all the features we’ve mentioned above on top of its backend.  Magento 2 Vue Storefront PWA websites are fast, powerful, available in offline mode, and can be saved as apps on a homescreen. Furthermore, Vue Storefront makes frontend development for Magento much more comfortable and powerful than it is by default. And since it is backend-agnostic, you can create a PWA frontend even for Magento 1. However, it doesn’t seem an option you need, considering all the advantages of the second platform version.

A headless PWA Vue frontend for Magento 2 offers the following features:

• Vue.js as a frontend library;
• Node.js and GraphQL as server APIs;
• Elasticsearch as a database;
• Support for all devices and platforms;
• Offline mode and low data requirements;
• Support for offline orders;
• Push notifications.

There is no need to download an application to visit a Magento 2 Vue Storefront PWA frontend. However, your customers have this opportunity.

As a developer, you can create faster stores in less time with the help of the Vue.js framework. Due to the headless architecture, your Magento 2 projects always remain flexible and scalable. Furthermore, you can leverage tons of built-in e-commerce features. In a case of any troubles, there is an active community willing to help you. 

Built-in e-commerce features

Below, you can find some features available for every Magento 2 Vue Storefront PWA website.

Checkout, Payment, & Shipping

• One-Page Checkout. Unlike the default checkout page, you get a one-page solution with the Magento 2 Vue Storefront PWA;
• Shipping Rates. The PWA platform also offers integrated shipping rates that update in real-time; 
• Security. All online orders and sensitive transactions have SSL protections;  
• Calculations. The platform calculates tax and shipping estimates before checkout;
• Customer Accounts. It is possible to register a customer account right on a checkout page after specifying all the necessary information;
• Saved Carts. The Magento 2 Vue Storefront PWA provides the ability to save shopping carts. As a store administrator, you can configure an expiration period;   
• Shipping Addresses. Multiple shipping addresses are supported in a customer account and all the related processes. Another notable improvement is a destination management feature;
• Other Shipping Features include: per order/item flat rate shipping options, free shipping, management by weight, etc.

SEO

• SSR. The Magento 2 Vue Storefront PWA offers server-side rendering to improve the ranking position of your e-commerce website;
• Light Footprint Design. With this feature you not only increase an average page load time but also improve SEO;
• Friendly URLs. Vue Storefront optimizes store URLs, making them more SEO-friendly. At the same time, the platform offers URL rewrite controls for your Magento 2 website;
• Metadata. With the Magento 2 Vue Storefront PWA, you can meta-information for products and categories;
• Additional Customizations include a pate with popular search terms. 

Reports and Analytics

• Google Analytics. Of course, the Magento 2 Vue Storefront PWA provides integration with Google Analytics out of the box;
• Dashboard. You get a dashboard with reports including a business overview of your e-commerce website;
• Numerous Reports. The PWA solution lets you leverage the following reports:
  • Total Sales;
  • Returns;
  • Taxes;
  • Abandoned shopping carts;
  • Most Viewed and Top Sold Products;
  • Low Stock Items;
  • Search Terms (Onsite);
  • Product Reviews + RSS;
  • Coupon codes;
  • Tags + RSS.

Marketing & Promotions

• Newsletter. The Magento 2 Vue Storefront PWA offers newsletter management capabilities;
• Catalog. You also get controls over promotional catalogs (including pricing);
• Coupons. Coupon management with flexible rules and pricing restrictions are available out of the box;
• Free Shipping. The Vue Storefront PWA offers free shipping as a promotion feature. You can freely manage related conditions;
• Product Bundles. Various bundled products options are available;
• Pricing. You can specify individual pricing for different customer groups;
• New Products. A promotional tool is available for new items. Besides, you have standard up-sell and cross-sell blocks;
• Wishlists. With the Magento 2 Vue Storefront PWA, both customers and administrators have tools for wishlist management.

Order Management

• The Vue Storefront PWA supports all order management features of Magento 2:
• Backend Management. Your admins can view, edit, create, and fulfill orders;
• Split Fulfillment. It is possible to create multiple documents per order;
• Printing. The Magento 2 Vue Storefront PWA provides the ability to print invoices and packing slips;
• Other features include the ability to view and edit a shopping cart, wishlist, last ordered items, compared products; assign custom prices; give discounts, send email notifications, etc.

Customer Services

• Contact Form. The Magento 2 Vue Storefront PWA offers a contact form to let your customers reach you;
• Customer Accounts. Every registered customer can leverage a feature-rich interface with order history and status updates, reorders, unlimited address book, default shipping and billing addresses, wishlists, newsletter subscription management;
• Admin Orders. Your administrators can create orders on behalf of your customers;
• Emails. Vue Storefront offers order and account update email notifications. Besides, order emails are fully customizable;
• Password Reset. Both your customers (from frontend) and administrators (from backend) can reset customer account passwords.

Inventory Management

• Inventory Management. The Vue Storefront Magento 2 PWA offers various inventory management features. For instance, you can set minimum/maximum quantities;
• Different Product Types. The solution also supports multiple product types, including simple, configurable, bundled, grouped, virtual, and downloadable;
• Tax Rates Management. You can set tax rates depending on a customer’s location, group, or ordered product type;
• Attribute Sets. Another useful feature is attribute sets. Use them to create products as fast as possible. Furthermore, Vue Storefront lets you create all the necessary attributes depending on the needs of your business;
• Customer Personalized Products. Although it is a custom feature, we’d like to draw your attention to it. So, the Vue Storefront Magento 2 PWA lets your buyers customize products you sell via embroidery or monogramming. It is only necessary to specify a text message. 

Products

• Media. It is possible to add multiple images to a product page. Zoom-in is available by default;
• Related Products. There is a block with related products on a product page;
• Stock Availability. Your customers can also see the availability of an item on a product page;
• Configurable Products. As we’ve mentioned above, the Vue Storefront Magento 2 PWA supports configurable products, so it is possible to select options there;
• Grouped Products. Standard grouped product functionality is available as well; 
• Wishlists. Customers can add products to a wishlist.

Catalog

• Elasticsearc. This search engine powers your catalog. Service Workers caching also enhances the standard searching experience;
• Offline Support. Catalog browsing is available in offline mode;
• Layered Navigation. It is possible to narrow down the selection of products in a category via filters; 
• Recently Viewed. The Vue Storefront Magento 2 PWA offers a block with recently viewed products;
• Comparisons. It is possible to compare products from a catalog;
• Related Products. The system also lets you display associated items as well as cross-sell and up-sell products in a catalog; 
• Product Listing. It is possible to switch between two category page layouts: list or grid. However, the feature is available via customization only. 
• Breadcrumbs not only enhance the customer experience your store offers but also improve SEO. 

Integrations

The Vue Storefront PWA offers lots of integrations with third-party services out of the box, including Paypal, Stripe, Alexa, Google Assistant, Adyen, Contentful, Klarna, Braintree intercom, etc. However, if you need to connect your Magento 2 PWA website to a system that Vue Storefront doesn’t support, Improved Import & Export is always under your disposal. The extension is frontend-agnostic, you can use it for all Magento 2 PWA solutions, including Vue Storefront. We also offer add-ons for each particular integration. Use them to simplify data transfers as much as possible.

Magento 2 Vue Storefront PWA success story 

Kubota is an iconic fashion brand from Poland that was brave enough to adopt modern e-commerce trends. With a mobile-first PWA website, the company returned to the market with more than 1000 orders within the first four weeks!

The following features illustrate Kubota’s primary motivation to switch to a Magento 2 PWA website from an ordinary e-commerce store: 

• Mobile-first approach that suits Google’s mobile-first indexing;
• Enhanced productivity with short page loading times at slower connections;
• Platform-agnostic e-commerce store that provides the same shopping experience on different  operating systems, devices, and browsers;
• Fast and admin-friendly store page updates;
• Enhanced security.

Kubota reached a 192% increase in the growth of daily visitors, got 94% more keywords in TOP 3 YoY, and improved loading times by 30%. You can find the entire Vue Storefront Magento 2 PWA success story here: Kubota’s case study of launching a PWA store.

Products & Pricing

Vue Storefront offers three packages. Firstly, it is an open-source project that lets you install Vue Storefront on your server at no cost. You can explore the project and connect it to the Magento 2 backend. The community PWA includes a basic template, access to the corresponding Slack community, and a PWA Storefront application. For further information, follow this link: Vue Storefront on GitHub.

Secondly, there is a production package that lets you get Vue Storefront along with extra support and services. You can create a seamless shopping experience on top of the Magento 2 backend together with the core Vue team. Note that the package is based on subscriptions. It offers code reviews, DevOps set up, production-ready sealing, support, and core team consulting. Contact Vue Storefront for more information.

Thirdly, you can leverage Storefront Cloud to skip all the technical nuances (including setup and maintenance) and get extra features. This package is subscription-based. It offers a basic storefront template, access to the Slack community, PWA application, cloud hosting, AMP rendering engine, and regular backups. Besides, there are several tiers within, so let’s describe each one.  

• Discovery. For 400€, you get a single non-production instance of Vue Storefront. It includes a containerized cluster. Besides, you get containerized source code management, managed CI/DC flow, and support for standard DevOps, deployments, and pipeline processes. The infrastructure SLA is 99,9% per month. You can also get an additional development instance for 99€. As for an additional Geo region, it costs 240€.
• Basic. This plan costs 500€ per month. It supports up to 5k baseline traffic page views per day and offers a single production instance. At the same time, you get one non-production. Other features are similar to the ones above except the ability to launch an additional production instance for 249€. Also, note that an additional Geo region is more expensive as well. It costs 400€. You can also increase a traffic peak up to 10X baseline per day for 100€.
• Premium. This plan is more expensive – 700€ per month. For this money, you get a two times higher volume of baseline traffic page views per day. And an additional Geo region costs two times more – 800€.
• Enterprise. If you expect more than 10k page views per day, choose this plan. It is the only tier that offers application support and SLA. Its price is provided upon request. 

For further information, follow this link: Storefront Cloud Pricing.

Storefront Cloud

Now, let’s say a few more words about Storefront Cloud and then proceed to the exploration of the Vue Storefront demo. 

Storefront Cloud is a fronted-as-a-service solution that powers progressive web applications. It is fast, secure, and easy to deploy. Furthermore, Storefront Cloud improves conversion and supports instant UX improvements. It is a child of mobile web and native apps that incorporates the benefits of modern browsers and native mobile applications:

• A Magento 2 Storefront Cloud PWA website works on all devices. Furthermore, it offers the same experience on all platforms and screen sizes.
• Google indexes Storefront Cloud Magento 2 PWA stores even though they act as a mobile application.
• Data requirements are so low that even a bad internet connection is not a problem. Furthermore, a Storefront Cloud Magento 2 PWA frontend is available offline! However, no download is required.
• It is also possible to leverage push notifications that are available with Storefront Cloud out of the box.

Thus, you provide store visitors with a profoundly engaging shopping experience as soon as they land on your website. The necessity to install a native application is eliminated. Your customers get a native-like experience right from the web.

Secure frontend

Storefront Cloud offers a reliable solution with a stable and consistent core that enhances the security of your e-commerce business. The company’s certified solution has been tested against a wide array of obstacles, proving its top-notch security level. At the same time, the platform runs through ongoing maintenance to provide users with the best possible experience of using the latest stable version. All these and numerous other factors help to defend websites and their visitors from multiple online threats. 

Reliable platform

Storefront Cloud is optimized for modern infrastructures, remaining flexible and scalable all the time. It is prepared for all conditions, allowing you to face any challenges. Kubernetes- and AWS-based hosting is under your disposal. Besides, the frontend is always ready for traffic peaks. The infrastructure of the Storefront Cloud PWA is reliable even during such events as Black Friday. The platform scale your applications automatically to provide global users with a fast and friendly shopping experience.

Top-notch performance

Storefront Cloud offers superior performance and availability. You can leverage the powerful frontend solution on top of the best e-commerce backend system, Magento 2, to get the fastest available e-commerce website. With world-class support and engineering teams, this goal doesn’t seem unreachable. Speed, accuracy, minimal system impact, and low administrative overhead are just a few characteristics of what Storefront Cloud provides.

World-class support

As for the world-class support and engineers, they are available through a single point of contact. Feel free to ask any questions related to Storefront Cloud. All your issues will be rapidly solved. The platform offers guaranteed SLAs and usually responds on the same day. You also get access to training and advisory services that let you better understand Storefront Cloud.

You can find more information about the frontend-as-a-service system here: Storefront Cloud.

Vue Storefront Magento PWA Frontend

Vue Storefront offers a demo to illustrate the reliability and top-notch user experience of the platform. Below, we share our impression of interacting with the frontend.

Home page

It seems that Vue Storefront lets you create any page layout you want for a homepage. Add the necessary blocks and sliders to provide your clients with what they are looking for right from the start. Add categories, products, and media content in all possible forms. However, such flexibility is not a competitive advantage anymore. It is a trend that every reliable e-commerce store should follow. The ability to customize your homepage increases brand awareness and makes the experience you offer unique.

However, the way the menu works looks quite interesting. You can navigate between categories without leaving your current page. When the necessary category is found, you can proceed to it within a single click. After being redirected, you stay in the same place in the category menu that dramatically increases the convenience, especially when you occasionally open the wrong category.

As for the search functionality of the Vue Storefront PWA frontend, it is lightning fast. You just start typing a query, and the system provides the results.  

A wishlist is quite straightforward: it contains a list of products that you’ve previously added. It is possible to remove items or proceed to product pages. 

As for a mini cart, it lets you view product details and edit quantity. However, you cannot change product options there. It is also possible to remove any item from the cart at this stage. 

After the Shopping summary section (it shows subtotal, shipping and handling costs, tax amount, and grand total as well as lets you apply a discount code), you can proceed straight to a checkout page or return shopping. 

The login form looks as follows:

Below the page, you can find a newsletter subscription section as well as links to categories and other store pages.

Category page

Although a category page looks quite minimalist, it is one of the best catalogs you can even imagine:

1. The layered navigation is speedy;
2. The page doesn’t contain unnecessary elements that attract your attention away. 

What else do you need as a customer? 

Product page

As for a product page, it shows product details and provides options. You can use a size guide, add a product to cart, wishlist, or compare. The zoom-in functionality is built-in. 

Next, you can see the product description. 

Below, there are sections with related products.

The page is very responsive to all your actions. It provides an impression of one of the fastest product pages (even among other demos).

CMS pages

When it comes to CMS pages, you can easily navigate between them due to the table of contents on the left. You won’t find anything extraordinary here; however, the functionality is top-notch.

Shopping cart

It seems that there is no separate shopping cart page. The only one available can be accessed on top of every store page. Thus, you never interrupt the shopping process, making the Vue Storefront PWA website more user-friendly. 

Checkout

All the checkout steps are available on a single page. If you are not registered, it is possible to create an account with the provided information. Each section of the page looks familiar. At the same time, you get a fresh feel of exploring something updated. 

If you don’t believe us, follow this link: Vue Storefront Demo. 

What People Say

We’ve already mentioned lots of positive aspects of Vue Storefront. However, the platform has several drawbacks that become visible, depending on your needs and technical experience. 

According to one of the reviews, some of the functionalities are limited. The author argues that the platform does not allow using jQuery and other dependencies. At the same time, you may still face several bugs. However, it is only a matter of time to fix them.

Another user points to the number of missing features, such as catalog rules. However, it seems that it is not a big problem because you can recreate the necessary experience. At the same time, the platform is evolving, so they may appear one day. 

There is also a review that highlights the complexity of Vue Storefront. The user says that support for such technologies as Elasticsearch, GraphQL, and others, is simultaneously an advantage for experienced coders but a disadvantage for users with minimal technical skills. 

Another user also argues that the installation procedure is quite challenging and not documented well. The less experience you have, the more complicated it seems. 

Some users also face problems with updates. Without a detailed step-by-step guide, it may be hard to get the newest version of Vue Storefront.

Also, the setup process may be quite complicated. When it comes to a production environment, you need to set up the connectors with the Magento backend. The procedure may take a long time to get everything working.

The lack of specific integration docs is another notable drawback of the project. According to one review, you have to create some adaptations to integrate your store with third-party systems. The same procedure is necessary for new backend functionalities related to third-party plugins and extensions.

So, what are the key drawbacks of the Vue Storefront Magento 2 PWA? It may be hard to install, configure, integrate, and update the system. Besides, it lacks some features and has some bugs. However, you can always find help on the community forums. Also, note that every update makes it better and more userfriendly. Despite some minor inconveniences, Vue Storefront already offers top-notch e-commerce experience on top of Magento 2.

You can find all the reviews here: What People Say About Vue Storefront.

How to Migrate to Vue Storefront Magento 2 PWA Website

The Vue Storefront PWA is a modern, robust, safe, and reliable project that lets you leverage the backend system of Magento 2 along with the latest achievements in the frontend sphere. You can create absolutely unique storefronts with the help of Vue developers or by yourself. But how to move your existing website to a new storefront?

As we’ve mentioned above, it is possible to leverage the Improved Import & Export Magento 2 extension. Our module is finetuned for the Magento 2 backend. However, it is frontend-agnostic. It means that you won’t face any difficulties using it with a Vue Storefront Magento 2 website. 

You can freely transfer all entities from your old Magento 1 or 2 store to a new PWA storefront. We offer an add-on for Magento 1 (2) to Magento 2 data transfers for free. At the same time, it is possible to migrate from other e-commerce platforms to a Vue Storefront Magento 2 PWA site. 

At the same time, our team offers migration services. You can rely on our specialists and let us transfer your old e-commerce website to a brand new PWA solution. You will find more information about the Improved Import & Export extension by following the link below. Also, contact our support to discuss the migration possibilities. 

Get Improved Import & Export Magento 2 Extension