Fully integrated open source ERP as a backend for Vue Storefront

Vue Storefront is the world's fastest-growing open-source headless eCommerce frontend, and Odoo the leading Open Source ERP integration is now ready, and on production mode.

Creating a new integration is a huge effort and requires a lot of dedication and focus. Packing those small details and intricacies of the vendor, also developing some special modules to make the communication happen. That’s the job that needs to be done well!

Our partners at OdooGAP made this fantastic integration, and we can explain a little bit more about Odoo and its eCommerce module, how the integration works, and what is necessary to start your own headless Odoo eCommerce.

But first…

Do you know Odoo?

Odoo is the leading Open Source ERP, growing at a staggering rate of 70% in 2021 reaching out to 7 million users with 4200 partners across the world. Odoo takes a new direction across the traditional ERP with a modern web interface and native mobile apps for Android and iOS.

Developed with a modular system, the user can add to their ERP different modules, such as Sales, Purchase, Accounting, Project Management, Sales Subscription, Fields Services, Social Media Marketing, Marketing Automation, Point of Sale among many others.

Why do you need Vue Storefront if Odoo has an eCommerce module?

Odoo provides an eCommerce module that can help you deliver a fast webshop, with a set of tools to help you in the process. But this module is monolithic and very tight to the Odoo platform, making any changes very difficult and complex for the long term. Here where the headless eCommerce gets very interesting.

Vue Storefront will enhance the scalability, decoupling, and specialization, of your project, also adding an amazing performance to your webshop.

With the headless approach, you will have the freedom to work decoupled from your backend, and create a separated team where they can run freely in different ways, but with the same goal to release an excellent store in the end.

What features does this Odoo integration have out of the box?

We can start by saying that this is not only integration but a completely new storefront for Odoo. Where features from the Odoo community and enterprises work out of the box.

You will be able to have a complete webshop experience with the product listing, product details, filterings, variants, wishlists, shopping cart, invoices, payment acquirer, and user management.

Other features, like analytics, special implementations, and enhancements also can be made, as this integration is totally Open Source and the community can participate in the development of it.

Also, Vue Storefront being a framework based on Nuxt, has an enormous amount of ready-to-use modules to enhance and cover some "missing" features.

I have some technical questions about the integration…

How does Vuestorefront connect to Odoo?

The Vue Storefront Odoo integration uses the Odoo GraphQL API to fetch the information needed to feed the store.

We are also using the Odoo Redis cache to make the response from API faster, with an auto invalidation process already coded within the integration, so you don't need to worry about it when changing any information in Odoo backends like product or categories.

What Odoo editions and versions are supported?

The Odoo Community and Enterprise versions are supported, and we will soon have all the versions from 10.0 to 15.0 being supported also.

Does it support multiple languages (i18n - internationalization)?

We are using nuxt-i18n on the Vue Storefront to manage the internationalization, and together with Odoo to provide some translated content from the backend.

Do I need to delete my existing Odoo store?

No, in fact, the Odoo eCommerce module is required to use with Vue Storefront integration. We will use the same data structure that you have for products, attributes, categories, orders, and payment acquirers. After you finish your new headless eCommerce, you just need to unpublish the old Odoo website and switch to the new Vue Storefront and you are ready.

How to get started

The easiest way to start is using the initial store template https://github.com/vuestorefront-community/template-odoo.git, clone it and run the commands “yarn && yarn build”. This will get you started but pointing to our Odoo demo server.

Then If you want to use your own Odoo server just do the following:

Clone the Odoo modules on your addons path (this is for Odoo 14.0 but we have other versions):

git clone --recurse-submodules --branch 14.0 https://github.com/odoogap/vuestorefront

Update your module list on the UI or on the command line so that Odoo finds new modules:

odoo-bin --no-http --max-cron-threads 0 --stop-after-init -u all

Install python dependencies

python3 -m pip install -r requirements.txt

Install Odoo Vuestorefront module:

odoo-bin --no-http --max-cron-threads 0 --stop-after-init -i graphql_vuestorefront

Clone our demo on your laptop:

git clone https://github.com/vuestorefront-community/template-odoo.git vsf-new
cd vsf-new
# your should install a local redis server first
export NODE_ENV=development
export BASE_URL=https//:your.odoo.server/
export REDIS_HOST=127.0.0.1
export REDIS_PORT=6379
yarn
yarn build
yarn start

This will start a development server at http://127.0.0.1:3000

Bring Vue Storefront to your Odoo and scale without limits!

Now as you know the integration, the next step is to get things done! Vist Vue Storefront on GitHub and start the limitless journey! Always with the help of our community!