HTMX

This handler module serves HTMX components with the .htmx extension.

Install

npm install @primate/frontend htmx-esm@0.2

Configure

Import and initialize the module in your configuration.

import { htmx } from "@primate/frontend";

export default {
  modules: [
    htmx(),
  ],
};

Use

Create an HTMX component in components.

<h1>Add post</h1>
<form hx-post="/htmx" hx-wrap="outerHTML">
  <p>
    <div><label>Title</label></div>
    <input name="title" />
  </p>
  <p>
    <div><label>Text</label></div>
    <textarea name="text"></textarea>
  </p>
  <input type="submit" value="Save post" />
</form>

Serve it from a route.

import { view, html } from "primate";

const posts = [
export default {
  get() {
    return view("post-add.htmx");
  },
  // create a POST route to replace contents upon form submission
};

The rendered component will be accessible at http://localhost:6161/htmx.

Configuration options

extension

Default ".htmx"

The file extension associated with HTMX components.

extensions

Default []

HTMX extensions to load, as an array of strings denoting the extension name.

client_side_templates

Default []

Client side templates to be used by the client-side-templates extension. Possible values: "handlebars", "mustache" and "nunjucks". Make sure you add "client-side-templates" to the extensions array option.

Resources

• Repository