From a89c2fcd2476cabe4908c0b26e1ac870212219c5 Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Sat, 27 Apr 2024 12:18:47 +0200
Subject: [PATCH] fix: client side navigation

---
 components/recipe/card.vue |  2 +-
 composables/useRecipe.ts   | 26 ++++++++++++++++----------
 nuxt.config.ts             |  2 +-
 pages/index.vue            |  2 +-
 pages/random.vue           |  9 +++++----
 5 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/components/recipe/card.vue b/components/recipe/card.vue
index 1db9cbf..c51f8c7 100644
--- a/components/recipe/card.vue
+++ b/components/recipe/card.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = defineProps<{
+defineProps<{
   title: string;
   pictureUrl: string;
   videoUrl: string;
diff --git a/composables/useRecipe.ts b/composables/useRecipe.ts
index 69ecbc2..2f7e94c 100644
--- a/composables/useRecipe.ts
+++ b/composables/useRecipe.ts
@@ -7,22 +7,28 @@ type Recipe = {
 };
 
 export default async function () {
-  const { data, error } = await useAsyncData("random", () => {
-    const config = useRuntimeConfig();
-    return $fetch(`${config.apiUrl}random.php`);
-  });
+  const { data, pending, error } = await useAsyncData(
+    "random",
+    () => {
+      const config = useRuntimeConfig();
+      return $fetch(`${config.apiUrl}random.php`);
+    },
+    { lazy: true },
+  );
+
+  const tmp = computed(() => data.value?.meals?.[0]);
 
-  const tmp = data.value?.meals?.[0];
   const recipe = reactive<Recipe>({
-    title: tmp?.strMeal,
-    pictureUrl: tmp?.strMealThumb,
-    videoUrl: tmp?.strYoutube,
-    category: tmp?.strCategory,
-    origin: tmp?.strArea,
+    title: tmp.value.strMeal,
+    pictureUrl: tmp.value.strMealThumb,
+    videoUrl: tmp.value.strYoutube,
+    category: tmp.value.strCategory,
+    origin: tmp.value.strArea,
   });
 
   return {
     recipe,
+    pending,
     error,
   };
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 445218e..152b212 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -16,4 +16,4 @@ export default defineNuxtConfig({
     public: {},
   },
   ssr: true,
-});
\ No newline at end of file
+});
diff --git a/pages/index.vue b/pages/index.vue
index 6ecb131..e4df656 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,7 +5,7 @@
       <div>
         <h1 class="text-5xl font-bold prose">Eat Something New</h1>
         <p class="py-6 prose">Generate a random recipe.</p>
-        <NuxtLink to="/random" class="btn btn-primary">
+        <NuxtLink to="/random" class="btn btn-primary" external>
           Random Recipe Now
         </NuxtLink>
       </div>
diff --git a/pages/random.vue b/pages/random.vue
index 75b676a..06bff02 100644
--- a/pages/random.vue
+++ b/pages/random.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
-const { recipe, error } = await useRecipe();
+const { recipe, pending, error } = await useRecipe();
 </script>
 
 <template>
-  <div v-if="error">Failed: {{ error }}</div>
+  <div v-if="pending">Loading</div>
+  <div v-else-if="error">Failed: {{ error }}</div>
   <section v-else>
     <div class="card w-96 bg-base-100 shadow-xl">
       <RecipeCard
         :title="recipe.title"
-        :pictureUrl="recipe.pictureUrl"
-        :videoUrl="recipe.videoUrl"
+        :picture-url="recipe.pictureUrl"
+        :video-url="recipe.videoUrl"
         :category="recipe.category"
         :origin="recipe.origin"
       />