better examples

playground/components/nav/NavBar.vue

@@ -9,8 +9,8 @@ import ContentWidthContainer from "~/components/ContentWidthContainer.vue";
         <div class="flex">
           <NuxtLink href="/" class="px-4 py-2 hover:bg-gray-800"> Home </NuxtLink>
 
-          <NuxtLink href="/todo" class="px-4 py-2 hover:bg-gray-800"> Todo </NuxtLink>
-          <NuxtLink href="/todo-precog" class="px-4 py-2 hover:bg-gray-800"> Todo-Precognitive </NuxtLink>
+          <NuxtLink href="/register" class="px-4 py-2 hover:bg-gray-800"> Register </NuxtLink>
+          <NuxtLink href="/register-precog" class="px-4 py-2 hover:bg-gray-800"> Register-Precognitive </NuxtLink>
         </div>
       </div>
     </ContentWidthContainer>

playground/pages/todo-precog.vue → playground/pages/register-precog.vue

@@ -5,8 +5,8 @@
 
 const entries = ref([]);
 
-const form = usePrecognitionForm("post", "/api/todo-precog", {
-  description: "",
+const form = usePrecognitionForm("post", "/api/register-precog", {
+  email: "",
   age: null,
 });
 
@@ -24,29 +24,24 @@ const submitForm = async () => {
   <div>
     <div class="flex gap-x-8">
       <form class="space-y-4" @submit.prevent="submitForm">
-        <div class="">
-          <LabeledInput
-            id="description"
-            v-model="form.description"
-            label="Description"
-            type="text"
-            name="description"
-            :errors="form.errors.description"
-            @change="form.validate('description')"
-          />
-        </div>
-        <div class="">
-          <LabeledInput
-            id="age"
-            v-model.number="form.age"
-            label="Age"
-            type="text"
-            name="age"
-            :errors="form.errors.age"
-            @change="form.validate('age')"
-            @focus="$event.target.select()"
-          />
-        </div>
+        <LabeledInput
+          id="email"
+          v-model="form.email"
+          label="Email"
+          type="text"
+          name="email"
+          :errors="form.errors.email"
+          @change="form.validate('email')"
+        />
+        <LabeledInput
+          id="age"
+          v-model.number="form.age"
+          label="Age"
+          type="text"
+          name="age"
+          :errors="form.errors.age"
+          @change="form.validate('age')"
+        />
 
         <div>
           <ButtonPrimary :disabled="form.processing || form.hasErrors"> Submit </ButtonPrimary>

playground/pages/todo.vue → playground/pages/register.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 const entries = ref([]);
 const form = useForm({
-  description: "",
+  email: "",
+  age: null,
 });
 
 const submitForm = async () => {
-  await form.post("/api/todo", {
+  await form.post("/api/register", {
     onSuccess: (response) => {
       entries.value.push(response._data);
     },
@@ -17,16 +18,15 @@ const submitForm = async () => {
   <div>
     <div class="flex gap-x-8">
       <form class="space-y-4" @submit.prevent="submitForm">
-        <div class="space-x-4">
-          <LabeledInput
-            id="description"
-            v-model="form.description"
-            label="Description"
-            type="text"
-            name="description"
-            :errors="form.errors.description"
-          />
-        </div>
+        <LabeledInput
+          id="email"
+          v-model="form.email"
+          label="Email"
+          type="text"
+          name="email"
+          :errors="form.errors.email"
+        />
+        <LabeledInput id="age" v-model.number="form.age" label="Age" type="text" name="age" :errors="form.errors.age" />
 
         <div>
           <ButtonPrimary :disabled="form.processing"> Submit </ButtonPrimary>
@@ -36,9 +36,9 @@ const submitForm = async () => {
     </div>
     <div class="pt-12">
       <pre />
-      <div class="text-lg font-bold uppercase">Entries</div>
+      <div class="text-lg font-bold uppercase">Registered Users</div>
       <div v-for="(entry, index) in entries" :key="index">
-        {{ entry.description }}
+        {{ entry.email }}
       </div>
     </div>
   </div>

playground/server/api/register-precog/index.post.ts

@@ -0,0 +1,30 @@
+import { z } from "zod";
+
+const registrationSchema = z.object({
+  email: z.string().trim().email(),
+  age: z.number().min(18, "You must be at least 18 years old"),
+});
+
+export default definePrecognitionEventHandler(registrationSchema, async (event) => {
+  // This handler function won't run on precognition requests!
+  // It will only run on actual form submissions.
+
+  // validate the input
+  // This will throw a validation error response if the input is invalid
+  const validated = await getValidatedInput(event, registrationSchema);
+
+  // do something with the body
+  const newUser = {
+    id: 1,
+    email: validated.email,
+  };
+
+  // simulate a slow response to show the loading state o the front-end
+  await sleep(1000);
+
+  return newUser;
+});
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

playground/server/api/register/index.post.ts

@@ -0,0 +1,27 @@
+import { z } from "zod";
+
+const registrationSchema = z.object({
+  email: z.string().trim().email(),
+  age: z.number().min(18, "You must be at least 18 years old"),
+});
+
+export default defineEventHandler(async (event) => {
+  // validate the input
+  // This will throw a validation error response if the input is invalid
+  const validated = await getValidatedInput(event, registrationSchema);
+
+  // do something with the body
+  const newUser = {
+    id: 1,
+    email: validated.email,
+  };
+
+  // simulate a slow response to show the loading state o the front-end
+  await sleep(1000);
+
+  return newUser;
+});
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}