Accept is way too complicated, so I'll have to investigate other ways this is done.

controllers/todo_alpine.js

@@ -1,21 +1,15 @@
 import { ToDo } from "../lib/models.js";
 import nunjucks from "nunjucks";
 
-// this can go away when I learn how to detect the request type
-export class TodoIndex {
-  async get(req, rep) {
-    const todo_list = await ToDo.all({});
-
-    const result = nunjucks.render("todo_alpine.html", {name: "Zed"});
-
-    rep.code(200).type("text/html").send(result);
-  }
-}
-
 export class Todo {
   async get(req, rep) {
-    const todo_list = await ToDo.all({});
-    rep.code(200).send(todo_list);
+    if(req.headers.accept === "application/json") {
+      const todo_list = await ToDo.all({});
+      rep.code(200).send(todo_list);
+    } else {
+      const result = nunjucks.render("todo_alpine.html", {name: "Zed"});
+      rep.code(200).type("text/html").send(result);
+    }
   }
 
   async post(req, rep) {
@@ -33,5 +27,4 @@ export class Todo {
 // I mean, it works not sure if I like it though
 export default {
   todo_alpine: Todo,
-  todo_index: TodoIndex
 };

templates/todo_alpine.html

@@ -5,8 +5,29 @@
 
 <script>
   const new_task = async (todos, task) => {
+    const result = await axios({
+      method: "post",
+      url: "/todo_alpine",
+      data: {task},
+      headers: {
+        Accept: "application/json"
+      }
+    });
+
     // zero error handling but fine for now
-    return (await axios.post("/todo_alpine", {task})).data;
+    return result.data;
+  }
+
+  const list_todo = async () => {
+    const result = await axios({
+      method: "get",
+      url: "/todo_alpine",
+      headers: {
+        Accept: "application/json"
+      }
+    });
+
+    return result.data;
   }
 </script>
 
@@ -14,7 +35,7 @@
 
 <div
   x-data="{todos: []}"
-  x-init="todos = (await axios.get('/todo_alpine')).data">
+  x-init="todos = await list_todo()">
   <ol>
     <template x-for="todo of todos">
       <li x-text="todo.task"></li>
@@ -22,10 +43,10 @@
   </ol>
 
   <h4>Add a New TODO</h4>
-  <form action="/todo_index" @submit.prevent="todos = new_task(todos, task), task = ''" method="POST" x-data="{task: ''}">
+  <form action="/todo_alpine" @submit.prevent="todos = await new_task(todos, task), task = ''" method="POST" x-data="{task: ''}">
     <label for="task">Task</label>
     <input name="task" x-model="task"></input>
-    <button type="button" @click="todos = new_task(todos, task), task = ''">Submit</button>
+    <button type="button" @click="todos = await new_task(todos, task), task = ''">Submit</button>
   </form>
 
 </div>