ERPGAP Blog / Vuestorefront - Odoo Connector live demo
Vuestorefront - Odoo Connector live demo

Vuestorefront - Odoo Connector live demo

Doing headless ecommerce using Odoo as backend

Online event

Last Friday 19th of August we hosted a live demo event on how to install Vue Storefront Odoo API on your local environment.

Take the best Headless system on the open source scene, using the most friendly and powerful technology. Then add the biggest open source ERP Odoo on as a backend and you will get the a framework that will grow with your company. Both systems are heavily supported by great communities and commercial partners so that you can rest assure you will have technical resources to support it’s implementation and growth. Land all your orders and clients directly on your Odoo ERP

Monolith vs Headless eCommerce Architecture

The frontends and backends of a headless system are decoupled, making it possible to change the content layer without disrupting business. This creates flexibility to allow the front and backend to work independently and create new user experiences without compromising old ones.

Monolith / Headless Monolith vs Headless

The decoupled architecture of headless commerce enables developers to make quick changes, such as implementing new functionalities and integrations without disrupting the backend. Also allows for the creation of customized designs and layouts for different endpoints, since front-end design can be changed without impacting the backend.

Headless commerce allows a business to control all touchpoints. This creates a consistent customer experience across different frontends that enable customers to complete a purchase at any touch point.

Vue Storefront Odoo API Connector Architecture

Vue Storefront Odoo API Connector Architecture

Vue Storefront uses Nuxt.js for serving the website. Having a separate system that serves the website http adds an additional layer but also adds the advantage of being able to stop the backend without totally halting the webshop.

Nuxt.js server will query Odoo through a GraphQL interface. Odoo exposes a tool that allows the frontend developers to have access to the GraphQL endpoints and all it’s documentation.

Start Odoo Now GraphQL Odoo Interface - GraphiQL Query and history

On the right pane you can chose to click on the “Documentation Explorer” where you can list all Queries and Mutations.

GraphQL Odoo Interface - Documentation Explorer

Caching System

In production we use SSR cache to serve faster. Before Nuxt.js server calls Odoo, it will check if it already has stored it on Redis server so that it can avoid a roundtrip to the backend. Cache is the best way to make any webserver fast but there are always different strategies depending on how the system is implemented.

How to Setup Odoo and Vue Storefront

If you want to try it your self, here are the steps:

Clone the repos, we took a risk of using dev branch, could be unstable:

# Vuestorefront demo boilerplate
git clone --branch dev --recurse-submodules

# Odoo Modules
git clone --branch 15.0 --recurse-submodules

You might need to adapt this to your local Odoo setup but here is how to run Odoo server:

# Activate Virtual Environment
source ~/envs/15.0/bin/activate
# Run Odoo
~/git/odoo/15.0/odoo-bin --addons-path ~/git/odoo/15.0/addons/,/home/dd/test/dd/vuestorefront -d v15_vsf -i graphql_vuestorefront

You will need open another console on the cloned vuestorefront-demos repo:

cd vuestorefront-demos/demo-1

Create a .env file inside demo-1 folder:

# node specific

# Redis

# Sitemap base url
# Sitemap base url
BASE_DOMAIN=localhost:8069 # to deprecate
# For the CDN if set

# Used for invalidating cache
# INVALIDATION_KEY=1aff985c-1d53-11ed-843d-e75406e16082


# For CI and other deployment scripts

If you want to test using Redis for cache, just uncomment the REDIS_HOST and sping a Redis container this way:

# Redis
docker run -d --name redis-server -p 6379:6379 redis/redis-stack-server:latest
Start Your Odoo Project Now

Check it out on Youtube

sales crm video

Important sites and repos


Connector API:

Odoo Modules:


Start Your Odoo Project Now

Other articles

Managing Your Manufacturing Overhead Costs

Managing Your Manufacturing Overhead Costs

Top 5 Things to Know Before Starting with Odoo Accounting

Top 5 Things to Know Before Starting with Odoo Accounting

ERPGAP Proudly Achieves Odoo Silver Partner Status in the UK and US

ERPGAP Proudly Achieves Odoo Silver Partner Status in the UK and US

About us

Odoo is a management software that fits all sizes. This software is for small, medium and large companies. Your company's information is all in one place. You don't have to go back and forth to check something. All apps have real-time access to your database.

Tags tags