We are proud to announce our Prestashop integration with Vue Storefront. The integration was created by our community partner Binshops, and it's entirely open source.

This article will give you a small overview of the PrestaShop integration with Vue Storefront, and we will also take a quick look at the prerequisites and available features.

Over the years, PrestaShop has become a well-known, reliable, and popular eCommerce solution.

Now PrestaShop integration with Vue Storefront allows shop owners to leverage the power of PrestaShop together with Vue Storefront, creating a seamless headless experience for their users.

The idea is simple: eCommerce core from PrestaShop and storefront using Vue Storefront. This way, we get the best of both worlds. 

The PrestaShop integration is open-source and is available on GitHub, and the documentation can be found at https://docs.vuestorefront.io/prestashop/

As you know, PrestaShop comes with the Webservices feature out of the box. But Webservices API provides access to database tables and models that is good for integrating applications like accounting applications.

We at Binshops created a REST API module that gives us the ability to get APIs for business logic, for example, API for getting featured products, categories and searching.

The module uses PrestaShop front controllers, so there is no significant difference between REST API controllers and the standard controllers. In REST API, they just return JSON instead of HTML, bringing the power of PrestaShop core to the API.

So, the module can be used to develop storefront applications, and here we are using it to develop our Vue Storefront integration. 

Also, just like the PrestaShop classic theme, this PWA depends on some native modules. Here is the list of modules: 

Other parts of the PWA are independent of native and third-party modules until now, like checkout steps, loading category products, and product detail. But in the future, we may add some other dependencies like the wishlist module.

Join us in this community project, and help develop it even further!

Join the Vue Storefront Discord channel and go to the #prestashop channel for any questions related to the integration.

What’s included in the initial release

The PrestaShop integration is an ongoing project, and the current version (1.0.0) supports fundamental features in PrestaShop. Let's check what’s included in the initial release. 

How to use the integration

Before starting, make sure you have installed Node 14 or higher. Now let’s set up the environment:

  1. First, we need to expose our PrestaShop REST endpoints. Download and install PrestaShop REST API and install it just like any other PrestaShop module. No additional configuration is required. 
  2. Clone the PrestaShop Integration template repository:
    git clone https://github.com/vuestorefront-community/template-prestashop
  1. Run yarn install to install dependencies
  2. Change the API url to your shop in this file: packages/theme/middleware.config.js
  3. Run yarn build to build the project
  4. Run yarn dev to start the project

Quick Start Video for Vue Storefront & PrestaShop integration