How to Integrate and Use Owl JS in Odoo 16 Website Module?

I am working on a custom website module in Odoo 16 and I would like to leverage Owl JS for some dynamic frontend functionality. However, I am not sure how to properly integrate Owl JS into my Odoo module and use it within my website pages.

Could someone provide a step-by-step guide on how to set up Owl JS in an Odoo 16 website module? Specifically, I am looking for guidance on:

Including Owl JS in my Odoo 16 module.
Setting up a basic component with Owl JS.
Rendering the component on a specific webpage.

Any code snippets or examples would be greatly appreciated. Thanks!

Solution

Use Owl components on the portal and website

I hope you find it helpful

For more owl solutions

owl_website/controllers/main.py

from odoo import http
from odoo.http import request


class Main(http.Controller):
    @http.route('/custom', type='http', auth='public', website=True)
    def website_owl(self, **kw):
        return request.render('owl_website.custom_page')

owl_website/views/templates.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="owl_website.custom_page" name="Custom Page">
        <t t-call="website.layout">
            <owl-component name="owl_website.OWLPortal" />
        </t>
    </template>
</odoo>

owl_website/static/src/components/portal/portal.xml

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="owl_website.OWLPortal" owl="1">
        Componente desde OWL
    </t>
</templates>

owl_website/static/src/components/portal/portal.js

/** @odoo-module */
import { Component } from '@odoo/owl';
import { registry } from '@web/core/registry';

export class OWLPortal extends Component {
  static template = 'owl_website.OWLPortal';
  static props = {};
}

registry.category('public_components').add('owl_website.OWLPortal', OWLPortal);

owl_website/__manifest__.py

'assets': {
        'web.assets_frontend': [
            'owl_website/static/src/components/**/*',
        ],
    },