htmx

How to configure base url for all requests using HTMX?

Given example from the docs

  <button hx-post="/clicked"
       hx-trigger="click"
       hx-target="#parent-div"
       hx-swap="outerHTML">
    Click Me!
  </button>

I want to change <scheme>://<netloc>/clicked to<scheme>://<netloc>/api/v1/clicked, so prepend /api/v1 into the base URL so all requests use this version. How to do that?

Solution

  • The only solution I can think of is to just alter the event path.

                <script>
                document.body.addEventListener('htmx:configRequest', (event) => {
                    event.detail.path = `/api/v1/${event.detail.path}`
                })
            </script>