Reach start state for RRv7 tutorial

error.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app';
+
+const props = defineProps<{
+  error: NuxtError
+}>();
+
+// const handleError = () => clearError({ redirect: '/' });
+</script>
+
+<template>
+  <main id="error-page">
+    <h1>{{ props.error.name }}</h1>
+    <p>{{ props.error.message }}</p>
+    <pre v-if="props.error.stack">
+      <code>{{ props.error.stack }}</code>
+    </pre>
+  </main>
+</template>

layouts/default.vue

@@ -0,0 +1,37 @@
+<template>
+  <div id="app">
+    <div id="sidebar">
+      <h1>Nuxt Contacts</h1>
+      <div>
+        <form id="search-form" role="search">
+          <input
+            id="q"
+            aria-label="Search contacts"
+            name="q"
+            placeholder="Search"
+            type="search"
+          >
+          <div
+            id="search-spinner"
+            aria-hidden
+            hidden
+          />
+        </form>
+        <form method="post">
+          <button type="submit">New</button>
+        </form>
+      </div>
+      <nav>
+        <ul>
+          <li>
+            <a href="/contacts/1">Your Name</a>
+          </li>
+          <li>
+            <a href="/contacts/2">Your Friend</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+    <slot/>
+  </div>
+</template>

pages/index.vue

@@ -1,49 +1,12 @@
 <script setup lang="ts">
-const { $trpc } = useNuxtApp();
-
-const { data: hello } = await $trpc.hello.useQuery({ text: 'client' });
-
-// Il typing sul risultato e' corretto, ma sul body no
-const { data: otherHello } = await useFetch('/api/test/HELLO', {
-  method: 'post',
-  body: {
-    world: 'MONDO'
-  }
-});
-
-const clientSide = ref<{
-  trpcData: string,
-  fetchData: string,
-} | null>(null);
-
-async function loadNewData() {
-  const [{ data: a1 }, { data: b1 }] = await Promise.all([
-    $trpc.hello.useQuery({ text: 'client' }),
-    useFetch('/api/test/HELLO', {
-      method: 'post',
-      body: {
-        world: 'MONDO'
-      }
-    })
-  ]);
-  clientSide.value = { trpcData: a1.value?.greeting ?? 'no', fetchData: b1.value?.risultato ?? 'no2' };
-}
+// const { $trpc } = useNuxtApp();
+//
+// const { data: hello } = await $trpc.hello.useQuery({ text: 'client' });
 </script>
 
 <template>
-  <div>
-    <h1>Index Page</h1>
-    <div>
-      <p>RPC Client output: {{ hello }}</p>
-      <p>Nuxt API output: {{ otherHello?.risultato }}</p>
-    </div>
-    <div>
-      <button @click="loadNewData">Carica ClientSide</button>
-      <div v-if="clientSide">
-        <p>{{ clientSide.trpcData }}</p>
-        <p>{{ clientSide.fetchData }}</p>
-      </div>
-    </div>
+  <div id="contact">
+    <p>Home Page!</p>
   </div>
 </template>