Vue.js frontend for the htmxr hello example.
The hello htmxr example is an interactive histogram (Old Faithful) served by an R/plumber2 server. It exposes a single endpoint:
GET /plot?bins=30 → image/svg+xml
This project demonstrates that an htmxr application is nothing more than an HTTP API — it returns web content (HTML, SVG, fragments) that any client can consume. The htmx client embedded in the page is just one consumer among many.
By replacing htmx with Vue, we get the exact same result: a slider that calls /plot?bins=N and displays the returned SVG. The R server does not know — and does not care — who is calling it.
This is the key insight: htmxr is not a framework that locks you into a specific frontend. It is a server that speaks HTTP and returns web content. Any frontend that can make HTTP requests and render HTML/SVG can connect to it.
- Vite + Vue 3 + TypeScript
- Bootstrap 5 via CDN (identical to the htmxr version)
/api/*proxy →https://hello.demo.breant.art/*(dev and prod)
npm install
npm run dev # → http://localhost:5173vercel deployThe vercel.json file configures the proxy to the R server — no CORS configuration needed.
| htmxr | Vue | |
|---|---|---|
| Client-side code | ~5 HTML attributes | ~25 lines of Vue SFC |
| JS dependencies | htmx (~14 KB) | Vue (~63 KB) |
| Debounce | delay:300ms in hx-trigger |
setTimeout in watchEffect |
| SVG injection | hx-swap="innerHTML" |
v-html |
| State | in the DOM | ref() |
The htmxr version delegates all interaction logic to the server and HTML attributes. The Vue version reimplements that logic on the client side.
