init

app/pages/index.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+
+const { fetchTodos, toggleTodo, createTodo, deleteTodo } = useTodoActions();
+const { data: todos, refresh, status, pending } = await useAsyncData('todos', () => fetchTodos());
+
+async function handleSubmit(event: Event) {
+  event.preventDefault();
+  const form = event.currentTarget as HTMLFormElement;
+  if (!form) return;
+
+  const formData = new FormData(form);
+  const title = formData.get("title");
+  await createTodo(title as string);
+
+  refresh();
+};
+
+</script>
+
+<template>
+  <!-- <div v-if="pending">Loading...</div> -->
+
+  <div v-if="todos !== undefined"
+    class="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
+    <main class="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+      <div class="flex flex-row items-center ">
+        <img class="dark:invert size-24" src="/nuxt.svg" alt="Nuxt logo" />
+        <div class="ml-3.5 mr-2 font-mono opacity-70">&amp;</div>
+        <img class="dark:invert" src="/bknd.svg" alt="bknd logo" width="183" height="59" />
+      </div>
+
+      <List :items="['Get started with a full backend.', 'Focus on what matters instead of repetition.']" />
+
+      <div class="flex flex-col border border-foreground/15 w-full py-4 px-5 gap-2">
+        <h2 class="font-mono mb-1 opacity-70"><code>What's next?</code></h2>
+        <div class="flex flex-col w-full gap-2">
+          <div v-if="todos.total > todos.limit"
+            class="bg-foreground/10 flex justify-center p-1 text-xs rounded text-foreground/40">
+            {{ todos.total - todos.limit }} more todo(s) hidden
+          </div>
+
+          <div class="flex flex-col gap-3">
+            <div v-for="todo in todos.todos" :key="String(todo.id)" class="flex flex-row">
+              <div class="flex flex-row flex-grow items-center gap-3 ml-1">
+                <input type="checkbox" class="flex-shrink-0 cursor-pointer" :checked="!!todo.done"
+                  @change="() => { toggleTodo(todo); refresh() }" />
+                <div class="text-foreground/90 leading-none">{{ todo.title }}</div>
+              </div>
+              <button type="button" class="cursor-pointer grayscale transition-all hover:grayscale-0 text-xs"
+                @click="() => { deleteTodo(todo.id); refresh() }">
+                ❌
+              </button>
+            </div>
+          </div>
+
+          <form class="flex flex-row w-full gap-3 mt-2" :key="todos.todos.map(t => t.id).join()" @submit="handleSubmit">
+            <input type="text" name="title" placeholder="New todo"
+              class="py-2 px-4 flex flex-grow rounded-sm bg-foreground/10 focus:bg-foreground/20 transition-colors outline-none" />
+            <button type="submit" class="cursor-pointer">Add</button>
+          </form>
+        </div>
+      </div>
+    </main>
+    <Footer />
+  </div>
+</template>