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

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">