Complete Throwing Responses

.gitignore

@@ -22,3 +22,6 @@ logs
 .env
 .env.*
 !.env.example
+
+# Local DB
+.db

assets/globals.css

@@ -59,6 +59,12 @@ button:active {
     transform: translateY(1px);
 }
 
+#__nuxt {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
 #app {
     display: flex;
     width: 100%;

error.vue

@@ -10,7 +10,8 @@ const props = defineProps<{
 
 <template>
   <main id="error-page">
-    <h1>{{ props.error.name }}</h1>
+    <h1 v-if="props.error.statusCode === 404">404</h1>
+    <h1 v-else>Error!</h1>
     <p>{{ props.error.message }}</p>
     <pre v-if="props.error.stack">
       <code>{{ props.error.stack }}</code>

layouts/default.vue

@@ -1,7 +1,15 @@
+<script setup lang="ts">
+const { $trpc } = useNuxtApp();
+
+const { data: contacts } = await $trpc.contactList.useQuery();
+</script>
+
 <template>
   <div id="app">
     <div id="sidebar">
-      <h1>Nuxt Contacts</h1>
+      <h1>
+        <NuxtLink to="/about">Nuxt Contacts</NuxtLink>
+      </h1>
       <div>
         <form id="search-form" role="search">
           <input
@@ -22,7 +30,14 @@
         </form>
       </div>
       <nav>
-        <ul>
+        <ul v-if="contacts?.length">
+          <li v-for="contact in contacts" :key="contact.id">
+            <NuxtLink :to="{name: 'contacts-contactId', params: {contactId: contact.id}}">
+              <template v-if="contact.first || contact.last">{{ contact.first }} {{ contact.last }}</template>
+              <i v-else>No Name</i>
+              <span v-if="contact.favorite">★</span>
+            </NuxtLink>
+          </li>
           <li>
             <NuxtLink :to="{name: 'contacts-contactId', params: {contactId: 1}}">Your Name</NuxtLink>
           </li>
@@ -30,6 +45,7 @@
             <NuxtLink :to="{name: 'contacts-contactId', params: {contactId: 2}}">Your Friend</NuxtLink>
           </li>
         </ul>
+        <p v-else><i>No contacts</i></p>
       </nav>
     </div>
     <div id="detail">

nuxt.config.ts

@@ -7,4 +7,7 @@ export default defineNuxtConfig({
   build: {
     transpile: ['trpc-nuxt']
   },
+  routeRules: {
+    '/about': { prerender: true },
+  }
 });

pages/about.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+</script>
+
+<template>
+  <div id="about">
+    <NuxtLink to="/">← Go to demo</NuxtLink>
+    <h1>About React Router Contacts</h1>
+
+    <div>
+      <p>
+        This is a demo application showing off some of the
+        powerful features of React Router, including
+        dynamic routing, nested routes, loaders, actions,
+        and more.
+      </p>
+
+      <h2>Features</h2>
+      <p>
+        Explore the demo to see how React Router handles:
+      </p>
+      <ul>
+        <li>
+          Data loading and mutations with loaders and
+          actions
+        </li>
+        <li>
+          Nested routing with parent/child relationships
+        </li>
+        <li>URL-based routing with dynamic segments</li>
+        <li>Pending and optimistic UI</li>
+      </ul>
+
+      <h2>Learn More</h2>
+      <p>
+        Check out the official documentation at{{ " " }}
+        <a href="https://reactrouter.com">
+          reactrouter.com
+        </a>{{ " " }}
+        to learn more about building great web
+        applications with React Router.
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

pages/contacts/[contactId].vue

@@ -1,15 +1,9 @@
 <script setup lang="ts">
-// const route = useRoute();
-// route.params.contactId
+const { $trpc } = useNuxtApp();
+const route = useRoute();
 
-const contact = ref({
-  first: "Your",
-  last: "Name",
-  avatar: "https://placecats.com/200/200",
-  twitter: "your_handle",
-  notes: "Some notes",
-  favorite: true,
-});
+const { data: contact } = await $trpc.contactGet.useQuery({ contactId: `${route.params.contactId}` });
+if (contact.value === null) throw createError({ statusCode: 404, statusMessage: 'Not Found' });
 
 function deleteSubmit(event: Event) {
   const response = window.confirm(

pages/index.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
-// const { $trpc } = useNuxtApp();
-//
-// const { data: hello } = await $trpc.hello.useQuery({ text: 'client' });
 </script>
 
 <template>
-  <div id="contact">
-    <p>Home Page!</p>
-  </div>
+  <p id="index-page">
+    This is a demo for React Router.
+    <br>
+    Check out{" "}
+    <a href="https://reactrouter.com">
+      the docs at reactrouter.com
+    </a>
+    .
+  </p>
 </template>
 
 <style scoped>

server/trpc/routers/index.ts

@@ -1,5 +1,6 @@
 import { publicProcedure, router } from '~/server/trpc/init';
 import { z } from 'zod';
+import { getContact, getContacts } from "~/server/utils/data";
 
 export const appRouter = router({
   hello: publicProcedure.input(
@@ -11,6 +12,14 @@ export const appRouter = router({
       greeting: `hello ${opts.input.text}`,
     };
   }),
+  contactList: publicProcedure.query(async () => {
+    return await getContacts();
+  }),
+  contactGet: publicProcedure.input(
+    z.object({ contactId: z.string() })
+  ).query(async (opts) => {
+    return await getContact(opts.input.contactId);
+  }),
 });
 
 // export type definition of API