after section 5

components/Car/Card.client.vue

@@ -0,0 +1,41 @@
+<script setup>
+  import heartFilled from "@/assets/heartFilled.png"
+  import heartOutline from "@/assets/heartOutline.png"
+
+  const props = defineProps({
+    car : Object,
+    favored : Boolean
+  });
+
+  const emit = defineEmits(['favor']);
+
+  // const favored = useState(`favored-${props.car.id}`,() => false);
+
+  // const handleClick = (car) => {    
+  //   navigateTo(`/car/${car.name}-${car.id}`);
+  // }
+</script>
+
+<template>
+         <!-- <img class="w-7 right-5 top-2 z-20" :src="favored ? heartFilled : heartOutline" alt="" @click="favored = !favored"/> -->
+         <img class="w-7 right-5 top-2 z-20" 
+            :src="favored ? heartFilled : heartOutline" alt="" 
+            @click="emit('favor',car.id)"/>
+
+    <div 
+      class="shadow border w-full overflow-hidden mb-5 cursor-pointer h-[200px]"
+      @click="handleClick(car)">
+        
+        
+         <div class="flex h-full">
+          <NuxtImg :src="car.url" alt="" class="w-[300px] h-full"/>
+          <div class="p-4 flex flex-col">
+            <div>
+              <h1 class="text-2xl text-blue-700">{{car.name}}</h1>
+              <p class="text-gray-700">{{car.description}}</p>                  
+            </div>
+            <h1 class="mt-auto text-xl">$39,555</h1>
+          </div>
+        </div>
+    </div>
+</template>

components/Car/Card.vue

@@ -1,27 +0,0 @@
-<script setup>
-  const props = defineProps({
-    car : Object
-  });
-
-  const handleClick = (car) => {    
-    navigateTo(`/car/${car.name}-${car.id}`);
-  }
-</script>
-
-<template>
-    <div 
-      class="shadow border w-full overflow-hidden mb-5 cursor-pointer h-[200px]"
-      @click="handleClick(car)">
-        <div class="flex h-full">
-          
-          <img :src="car.url" alt=""/>
-          <div class="p-4 flex flex-col">
-            <div>
-              <h1 class="text-2xl text-blue-700">{{car.name}}</h1>
-              <p class="text-gray-700">{{car.description}}</p>                  
-            </div>
-            <h1 class="mt-auto text-xl">$39,555</h1>
-          </div>
-        </div>
-    </div>
-</template>

components/Car/Cards.vue

@@ -1,9 +1,28 @@
 <script setup>
     const {cars} = useCars();
+
+    const favorite = useLocalStorage("favorite",{});
+
+    const handleFavorite = (id) => {
+        if (id in favorite.value) {
+            delete favorite.value[id];
+        } else {
+            favorite.value = {
+                ...favorite.value,
+                [id]: true
+            }
+        }
+    };
+
 </script>
 
 <template>
     <div class="w-full">
-        <CarCard v-for="car in cars" :key="car.id" :car="car" />
+        <ClientOnly>
+            <CarCard v-for="car in cars" :key="car.id" :car="car" 
+            @favor="handleFavorite"
+            :favored="car.id in favorite"
+                />
+        </ClientOnly>
     </div>
 </template>

components/Car/Detail/Hero.vue

@@ -8,7 +8,7 @@
 <template>
 
   <div class="mt-10">
-      <img class="w-full" :src="car.url" alt="" />
+      <NuxtImg class="w-full" :src="car.url" alt="" />
       <h1 class="mt-10 text-4xl">{{car.name}}</h1>
       <div class="text-slate-500 flex text-lg mt-3 border-b pb-5 justify-between">
         <div class="flex">

components/Car/SideBar.vue

@@ -1,7 +1,7 @@
 <script setup>
   const modal = ref({
     make: false,
-    location: true,
+    location: false,
     price: false,
   });
 

nuxt.config.ts

@@ -5,6 +5,10 @@ import { resolve } from "path"
 export default defineNuxtConfig({
   devtools: { enabled: true },
   css: ['~/assets/css/main.scss'],
+  modules:[
+    "@nuxt/image-edge",
+    '@vueuse/nuxt',
+  ],
   postcss: {
     plugins: {
       tailwindcss: {},

package.json

@@ -22,6 +22,8 @@
     "vue-tsc": "^1.8.27"
   },
   "dependencies": {
+    "@nuxt/image-edge": "^1.1.0-28404773.c60aac2",
+    "@vueuse/nuxt": "^10.7.1",
     "sass": "^1.69.6"
   }
 }