Is it possible to integrate Webpack/VueJS with the Odoo Framework (v12)?

Question

I'd like to integrate VueJS through WebPack in one of my custom Odoo modules, and have it start up automatically when I launch Odoo-bin.

Does anyone have a solution? Is it even possible?

I know you can include VueJS as a simple .JS file in the module's template, but that means I can't use the .vue components supported by WebPack.

I also read that Odoo has its own JS framework, but I couldn't find good tutorials/documentation for it.

EDIT: To anyone that might be wondering how I solved this, here's what I did:

I initialized a package.json file in the root of my Odoo folder using npm init. I added a start script to the package that launches webpack and bundles all vue components in myAddons folder (where I store my custom modules), then launches Odoo through the python odoo-bin ... command. All that's left is to use npm start to start it all up.

This way, the vue components get bundled into single JS files, that I then add to the templates of my modules. This has a small inconvenient in that the first bundle has to be done manually in order to know which JS files need to be imported to the templates. Also, i'm still trying to figure out how to bundle the components of every single module separately. Will update this once I find a proper way to do it. ...Hopefully.

Answer 1

By default, odoo frontend part is heavily built upon backbone, jquery, underscore. If you want to use any other JS library, you have to make sure the compatibility in between them. The odoo backend parts of JS functionalities are written under web module can be found in odoo/addons/web/static/src/js directory in odoo community codes. The ecommerce/website part is under website* modules.

Answer 2

Along with the fact that the Odoo JS API documentation is basically non-existent (as of the time I am posting this) .. I would add the fact that its going to be like working with a moving target compared to calling Odoo's JSON-RPC API directly since their JSON-RPC API changes very little over different versions of Odoo.

Moreover, making JSON-RPC API calls with Axios is extremely simple. So just go directly to the server's JSON-RPC API from your Vue project.

This is what I am doing with at odooinvue.org which is basically a Vue project that uses Odoo in the back-end. That project is designed specifically as a resource for Vue developers that are trying to use Odoo in the back-end but have difficulty because they are new to Odoo development.

Answer 3

I suggest trying @StartupGuy's odooinvue, which is really nice. With Odoo 14 they created a new modern frontend framework: Owl framework.

I have not tried it myself.