Complete "Client Side Routing"

components/ContactFavorite.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const props = defineProps<{
+  contact: Pick<ContactRecord, "favorite">
+}>();
+
+const favorite = computed(() => props.contact.favorite);
+const ariaLabel = computed(() => favorite.value ? "Remove from favorites" : "Add to favorites");
+</script>
+
+<template>
+  <form method="post">
+    <button
+      :aria-label=ariaLabel
+      name="favorite"
+      :value="() => favorite ? 'false': 'true'"
+    >
+      {{ favorite ? "★" : "☆" }}
+    </button>
+  </form>
+</template>
+
+<style scoped>
+
+</style>

layouts/default.vue

@@ -24,14 +24,16 @@
       <nav>
         <ul>
           <li>
-            <a href="/contacts/1">Your Name</a>
+            <NuxtLink :to="{name: 'contacts-contactId', params: {contactId: 1}}">Your Name</NuxtLink>
           </li>
           <li>
-            <a href="/contacts/2">Your Friend</a>
+            <NuxtLink :to="{name: 'contacts-contactId', params: {contactId: 2}}">Your Friend</NuxtLink>
           </li>
         </ul>
       </nav>
     </div>
-    <slot/>
+    <div id="detail">
+      <slot/>
+    </div>
   </div>
 </template>

pages/contacts/[contactId].vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+// const route = useRoute();
+// route.params.contactId
+
+const contact = ref({
+  first: "Your",
+  last: "Name",
+  avatar: "https://placecats.com/200/200",
+  twitter: "your_handle",
+  notes: "Some notes",
+  favorite: true,
+});
+
+function deleteSubmit(event: Event) {
+  const response = window.confirm(
+    'Please confirm you want to delete this record.'
+  );
+  if (!response) {
+    event.preventDefault();
+  }
+}
+</script>
+
+<template>
+  <div id="contact">
+    <div>
+      <img
+        :key="contact.avatar"
+        :alt="() => `${contact.first} ${contact.last} avatar`"
+        :src="contact.avatar"
+      >
+    </div>
+
+    <div>
+      <h1>
+        <template v-if="contact.first || contact.last">
+          {{ `${contact.first} ${contact.last}` }}
+        </template>
+        <i v-else>No Name</i>
+        <ContactFavorite :contact="contact"/>
+      </h1>
+      <p v-if="contact.twitter">
+        <a :href="`https://twitter.com/${contact.twitter}`">{{ contact.twitter }}</a>
+      </p>
+      <p v-if="contact.notes">{{ contact.notes }}</p>
+      <div>
+        <form action="edit">
+          <button type="submit">Edit</button>
+        </form>
+
+        <form
+          action="destroy"
+          method="post"
+          @submit="deleteSubmit">
+          <button type="submit">Delete</button>
+        </Form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>