Complete Loading Data and Index Route. HydrateFallback skipped BUT POSSIBLE.

assets/globals.css

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

layouts/default.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+const { $trpc } = useNuxtApp();
+
+const { data: contacts } = await $trpc.contactList.useQuery();
+</script>
+
 <template>
   <div id="app">
     <div id="sidebar">
@@ -22,7 +28,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 +43,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">

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 id="index-page">
-    <p>Home Page!</p>
+    This is a demo for React Router.
-  </div>
+    <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 { getContacts } from "~/server/utils/data";
 
 export const appRouter = router({
   hello: publicProcedure.input(
@@ -11,6 +12,9 @@ export const appRouter = router({
       greeting: `hello ${opts.input.text}`,
     };
   }),
+  contactList: publicProcedure.query(async () => {
+    return await getContacts();
+  })
 });
 
 // export type definition of API