Request Quote

Introducing vue.js in Prestashop

PrestaShop introduces a new front-end technology in the PrestaShop back office: Vue.js. I am discussing here why PresatShop needs vuejs , why they choose vuejs and how they implement vuejs in PrestaShop.

What is Vue.js?

“Vue is a progressive framework for building user interfaces.” Vue.js is a JavaScript library, the core library is focused on the view layer only, To get a rough idea of what Vue (pronounced “view”) does, think about it as the ‘V’ in an MV* pattern. If you’d like to compare it to something else, it’s probably closest to React but with a far lower barrier of entry. No need to learn something like JSX or pre-compile files just to give it a try. Drop it into your HTMLs header like any JS library, and you’re all set. templating will probably look familiar to anyone who has worked with Angular in the past.

Why Vue.js need in Prestashop?

It is really best for developers to think in a component way as much as we could, and to mutualize as much code as possible and a progressive framework is the best way to do the same.

PresatShop implements a Vue.js in there back office on Product controller and translation page. as we know the admin panel interface should be more convenient to use for users, it was a nice idea to introduce a progressive framework.

PrestaShop introduces a new Stock Management system, so they took advantage of this opportunity to use the Vue.js. also, there were some performance issues on the Translations page so PrestaShop revamped this page using Vue.js as well. on the Product Creation page upon changing the base price or the tax rate for a product the changes must apply to all price fields and synchronize with each other. Implementing such functionality on pure JavaScript or jQuery would be too difficult, if not impossible. Therefore, it was decided to use Vue.js and its Vuex library.

Why Prestashop choose vue.js?

So let’s talk about what made VueJS so attractive for PrestaShop. I have already cleared some points above like PresatShop used vue.js to improve the User Experience in an iterative way Vue.js allows the interface to work as a “Single Page Application”, which removes the need to reload the page at each user action. its also better to have a “Single File Components”, meaning that you have one HTML component per file. this technique makes it easy to re-use them everywhere in your modules’ interface and have the same UI easily.

There are several state management systems like Redux or Flux, but Prestashop chose to use Vue.js and its state management library, Vuex. the reason they tell for the same is Vues.js is simple for developers also the library is lightweight.

if we see the size chart of some JavaScript library which could be a substitute for Vues.js

Name Size
Vue 2.4.2 58.8K
Angular 2 566K
Angular 2 + Rx 766K
Angular 1.4.5 143K
React 0.14.5 + React DOM 133K
React 0.14.5 + React DOM + Redux 139K
React 16.2.0 + React DOM 97.5K
Ember 2.2.0 435K
Ember 1.13.8 486K

How Prestashop implement vue.js?

Vue.js components are currently used for stock and translations pages. You can find all the work done on these pages (and others as they appear) in the “pages” folder: \admin\themes\new-theme\js\app\pages and in the “widgets” folder you can find all the common components that have already been created: \admin\themes\new-theme\js\app\widgets as we can see, PrestaShop developers have done a great job of implementing Vue.js in PrestaShop. And they will not stop there. These guys are planning to create even more components and use Vue.js on other pages. here you can find the official doc for vue.js to understand it more click here.

. . .


Add Your Comment

Be the first to comment.

Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again