Vue.JS is a JavaScript library that has taken the world of frontend developers by storm. Even for one of the latest libraries on JavaScript, Vue stands a stiff competition for the existing leaders like React and Angular.

As for recent stats, here is a comparison between the popularity of these three JavaScript frameworks:

React vs Angular vs Vue

React vs Angular vs Vue

Compared to React, Vue is roughly 5 years younger with nearly a quarter of the number of contributors on Github. However, Vue leads the chart with 15k and 101k more stars compared to React and Angular respectively. That speaks the extent to which the framework is meeting client needs.

The question is why? What makes it a favorite for the developers and the site owners at this young age? What makes it so different from the existing JavaScript frameworks?

While there are thousands of blogs that literally serve as a love letter to Vue JS, all of them boil down to just one factor, its size.

ReactJS weighs nearly 110 KB while AngularJS weighs around 167 KB. 

VueJS framework barely weighs 18 KB!!!

Does it compromise with the performance? No. In fact, it only delivers better, especially when you are only looking for frontend development. VueJS creates a virtual DOM, much like its closest predecessor, React. The framework is expected to deliver a robust UI, leaving your visitors with an excellent User Experience.

We have already praised VueJS enough in our existing blogs. You can read one here: Vue development: what you need to know. 

Back to the business. Our client was naturally attracted to VueJS for his Magento based store. All he needed was a more intuitive webstore. Inspecting through the store, we discovered the following issues that needed attention:

  1. Slow loading speed

  2. Not much mobile responsive

To our understanding, it was due to the deeply connected Knockout JS on the Magento storefront. How cool would it be to let the Magento platform handle only the e-commerce processes like inventory management, and shipping management, and allow a JavaScript frontend library to manage a highly intuitive User Interface? What we are going to do is separate the respective platforms per their specialization. That is, the VueJS template will solely handle the frontend executions without interfering with the backend operations, and the Magento platform will handle the backend executions.

Also read: Coupled, Decoupled and Headless CMS platforms

Using VueJS Template for a Faster Page Loading Speed

The existing web store was a Magento-run store, where every screen activity was controlled by the e-commerce platform. As a result, the backend possessed a strong participation every time there’s user activity. The Knockout JS-based template requested the Magento backend for the simplest of the tasks. Not to forget the buffer time for the interactions. We had to eliminate this part.

VueJS is popular for its API driven templates. A majority of the requests are resolved without reaching out to the backend services. In simple words, the backend is no more eligible to interfere in the tasks performed at the frontend. The buffer time and the cross-platform interaction time is circumvented boosting the page loading speed by numbers.

Vue template connecting store backend via API

Vue template connecting store backend via API


Page loading speed reduced by 5 seconds!!!

Resolving Mobile Responsiveness

Mobile focused design is the need of the hour. With VueJS, the task becomes more achievable. VueJS is described as PWA oriented technology providing the web store with the much needed mobile responsiveness. The framework allows the developers to write in any script of their choice be it Java, HTML or CSS allowing you to create and add as many frontend features, while its lightweight saves the app from getting overloaded.

Now that we have opted for a Headless approach, the template treats the database information like field details which renders the desired liquidity to the product pages at the front.

In our case, we have utilized components from VueStorefront to create the VueJS template. Its functioning is available here: Integrating Vue.JS with Magento2.

Traditional approach vs Headless Approach

Traditional approach vs Headless Approach

A Step-Wise Guide to Integrate Vue Storefront With Magento 2

Vue Storefront is quite fulfilling for readily establishing a storefront on any e-commerce platform. Starting with the basics, the first query developers come across is accessing data on Vue Storefront from Magento store. What we need to do first is to create a gateway to bridge the sharing of data. 

Firstly, we shall allow access for Magento Integration. For the same, go to Magento2 admin panel and click on System>Integrations. 

  • Opt for Add new integration to request for new API. 
  • Next fill up the fields like Name, Password and the API permissions needed in our API like-catalog, sales, etc. 
  • Use these tokens to bring Magento and Vue Store to the same frame.
  • Save the details and select Activate to get the OAuth access tokens. Use the tokens generated to create the bridge.

Quicker Way to Integrate Vue Storefront With Magento 2

With those permissions, the Vue-Storefront-API receives the Magento 2 data import and is managed by the Mage2vuestorefront. Being added as a dependency to the Vue-Storefront-API, Mage2vuestorefront is responsible for synchronizing the products, categories, attributes, links and more.

For importing products: 

To fetch important information from the Magento 2 backend, you can run the following command:

The command fetches the details directly to the Elasticsearch instance.

Integrating Manually

Mage2vuestorefront plays as the bridge here, again.

Modify the config.js file in mage2vuestorefront directory to redirect them to your Magento 2 URL.
Moreover, add the tokens generated in the ENV files.

Let the rest of the config.js files connect with your Vue-Storefront-API Redis instances.

For importing products: 

Use node cli.js commands in order to fetch the products, categories, and attributes.


The store can now fit in all the screens- desktop/tablet and mobile phones.


Source link

Write A Comment