fix: client side navigation

components/recipe/card.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = defineProps<{
+defineProps<{
   title: string;
   pictureUrl: string;
   videoUrl: string;

composables/useRecipe.ts

@@ -7,22 +7,28 @@ type Recipe = {
 };
 
 export default async function () {
-  const { data, error } = await useAsyncData("random", () => {
+  const { data, pending, error } = await useAsyncData(
-    const config = useRuntimeConfig();
+    "random",
-    return $fetch(`${config.apiUrl}random.php`);
+    () => {
-  });
+      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,
+    title: tmp.value.strMeal,
-    pictureUrl: tmp?.strMealThumb,
+    pictureUrl: tmp.value.strMealThumb,
-    videoUrl: tmp?.strYoutube,
+    videoUrl: tmp.value.strYoutube,
-    category: tmp?.strCategory,
+    category: tmp.value.strCategory,
-    origin: tmp?.strArea,
+    origin: tmp.value.strArea,
   });
 
   return {
     recipe,
+    pending,
     error,
   };
 }

nuxt.config.ts

@@ -16,4 +16,4 @@ export default defineNuxtConfig({
     public: {},
   },
   ssr: true,
-});
+});

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>

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"
+        :picture-url="recipe.pictureUrl"
-        :videoUrl="recipe.videoUrl"
+        :video-url="recipe.videoUrl"
         :category="recipe.category"
         :origin="recipe.origin"
       />