Complete "Client Side Routing"

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>