Skip to content
πŸ’œ Odoo module for Vue Storefront
Python HTML
Branch: master
Clone or download
Latest commit 2133dca Jul 15, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
controllers Bug fix Jul 14, 2019
data API endpoint to suscribe users to notifications channel "all" Jul 5, 2019
docs/vuepress/public Examples (gifs) Jun 10, 2019
models Renamed methods Jul 13, 2019
security Fields of new access model Feb 13, 2019
static/description Icon and basic information Jun 9, 2019
views Views added Feb 13, 2019
.gitignore Instructions to config params Jun 29, 2019
LICENSE Create LICENSE Jun 10, 2019 Update Jul 15, 2019 Init Feb 12, 2019 Codestyle improvements Jul 13, 2019 Update Jul 14, 2019

Odoo module for Vue Storefront


Why Odoo?

In contrast of eCommerce integration solutions, Odoo is unique in that it includes ERP, eCommerce and CMS functionalities without the need for additional solutions. As explained in the official website, Odoo is a suite of open-source business apps that cover all the company needs: CRM, eCommerce, accounting, inventory, point of sale, project management, etc. All in all, Odoo's unique value proposition is to be at the same time very easy to use and fully integrated.

Why Vue Storefront?

Vue Storefront offers a mobile native-like user experience:

  • A look and feel that is integrated with the native platform, which implies:
    • An app icon on the home screen.
    • App is able to run full screen.
  • A decrease in loading times after the app installs the Service Workers, thanks to caching layouts and content. The mobile app tries to act as immediately as possible on user input, avoiding the use of the internet connection as much as possible.
  • Re-engaging with users via push notifications.

Vue Storefront avoids the complexity of having to maintain several native developments – for instance, one for Android and one for iOS –, having a single platform to avoid extra development costs. Furthermore, with the possibility of enabling Server-Side Rendering for the load of the first webpage, we can remark the importance of SEO within the eCommerce industry and offer a solution capable of being crawled by search engines.

Modifying the default architecture of Vue Storefront

By default, Vue Storefront includes a NoSQL/ElasticSearch database back-end within its architecture ( However, in order to avoid the maintenance of two different data stores, the proposed architecture for this project removes the Elastic Search data store in favour of directly connecting the front-end with the Odoo back-end. As a result, the new architecture is based on the fact that the front-end should be able to directly crawl the Odoo back-end API, as it is presented with the following diagram.


The class called SearchAdapter is a client-side code which is responsible of retrieving the following data from the back-end:

  • Product
  • Attribute
  • Category
  • Tax rule

UML class diagram of SearchAdapter client-side class

As a result, this class is responsible of loading the product listing that appears on the home screen and category pages, not only when the user makes a search. While the default SearchAdapter provided by Vue Storefront retrieves data from the ElasticSearch back-end, this project uses a RESTful API using JSON format as back-end.

Changes that must be done in order to achieve a working communication between the front-end and the Odoo back-end are avaliable on this repo:

Odoo module

The API development of this project is packaged as an Odoo module, which is composed by the following elements:

  • Controllers
  • Business objects
  • Data files
  • Static web data

Class diagram


They are declared as Python classes that handle requests by extending the Controller class from odoo.http package. In the case of this project, there are three Controllers:


  • Handles requests which do not use user authentication.
  • Examples: retrieve products, sign up, etc.


  • Handles requests which can use user authentication (it can either be required or optional).
  • Examples: add product to cart, edit profile, etc.


  • Handles requests about generating or invalidating authentication tokens. It receives the credentials of the user – email and password – and then returns the computed token.

Business objects

They are declared as Python classes extending Model class from odoo.models package which integrates them into the automated persistence system (database). In the case of this project:

  • AccessToken is a new model created to encapsulate the attributes of each authentication token, such as its lifetime and the related user.
  • User model has been explicitly created in order to extend the existing User model to add the related identification tokens.

Data files

In the case of this project, it consists in an XML file declaring configuration data (module parameterization). It is named "ir_config_param.xml" inside the "data" folder and contains a parameter, which is the number of seconds of lifetime of the authentication token.

Static web data

They are static assets, such as images, CSS files or JavaScript files that can be used by the web interface or Odoo website. In the case of this project, they are located inside the "static" folder, which includes the "description" assets, which are used to display the module within the Odoo administration panel.

  • icon.png
  • index.html (contains module title and description)
  • main_screenshot.png

Installation of the Odoo module

  1. cd C:\Program Files (x86)\Odoo 12.0\server\odoo\addons
  2. git clone vue_storefront
  3. Copy data/ir_config_param_example.xml to data/ir_config_param.xml and set your desired params
  4. Update apps/modules list List Update list
  5. Install module Install Installed

Installation of Vue Storefront

Note that the Odoo module just includes the needed API.

Install Vue Storefront, including my SearchAdapter from my repo:

Remember to set useExactUrlsNoProxy to true, if you are not using ImageMagick or similar.

In order to set up a production environment, it is recommended to follow this instructions.

Otherwise, in case you are just developing, just run yarn in order to install the dependencies and then yarn dev in order to compile and run the front-end in your browser.


Product listing

Product listing

Categories and subcategories

Categories and subcategories




  • Open-source alpha release (June) - Done
  • Beta release (July) - Done


  • Odoo v12
  • Vue Storefront v1.9.2

The license

Odoo module for Vue Storefront source code is completely free and released under the MIT License.


If you like the idea behind Odoo and Vue Storefront and want to become a contributor - do not hesitate and check our list of the active issues or contact me directly via

If you have discovered a 🐜 or have a feature suggestion, feel free to create an issue on Github.

You can’t perform that action at this time.