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>