fetch by id

composables/useRecipe.ts

@@ -8,12 +8,32 @@ type Recipe = {
   instructions: string;
 };
 
-export default async function () {
+type Keyword = "random" | "filter" | "lookup" | "search";
+export default async function (keyword: Keyword, param?: string) {
   const { data, pending, error } = await useAsyncData(
-    "random",
+    keyword,
     async () => {
       const config = useRuntimeConfig();
-      return await $fetch(`${config.apiUrl}random.php`);
+
+      let url = "";
+
+      switch (keyword) {
+        case "random":
+          url = `${config.apiUrl}random.php`;
+          break;
+        case "filter":
+          url = "";
+          break;
+        case "lookup":
+          url = `${config.apiUrl}${keyword}.php?i=${param}`;
+          break;
+        case "search":
+          url = "";
+          break;
+        default:
+          throw Error("unexpected URI parameters");
+      }
+      return await $fetch(url);
     },
     { lazy: true },
   );

pages/[id].vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const { params } = useRoute();
+const { recipe, pending, error } = await useRecipe("lookup", params.id);
+</script>
+
+<template>
+  <div v-if="pending">Loading</div>
+  <div v-else-if="error">Failed: {{ error }}</div>
+  <section v-else>
+    <div class="lg:flex space-y-4 lg:justify-evenly py-4">
+      <div class="card w-96 bg-base-100 shadow-xl mx-auto lg:mx-2 min-h-32">
+        <RecipeCard
+          :title="recipe.title"
+          :picture-url="recipe.pictureUrl"
+          :video-url="recipe.videoUrl"
+          :category="recipe.category"
+          :origin="recipe.origin"
+        />
+      </div>
+
+      <RecipeIngredients :ingredients="recipe.ingredients" />
+    </div>
+    <div class="flex flex-col items-center">
+      <h2 class="prose lg:prose-xl">Instructions</h2>
+      <p class="prose">{{ recipe.instructions }}</p>
+    </div>
+  </section>
+</template>

pages/random.vue

@@ -1,5 +1,11 @@
 <script setup lang="ts">
-const { recipe, pending, error } = await useRecipe();
+definePageMeta({
+  pageTransition: {
+    name: "custom-flip",
+    mode: "out-in",
+  },
+});
+const { recipe, pending, error } = await useRecipe("random");
 </script>
 
 <template>
@@ -19,7 +25,7 @@ const { recipe, pending, error } = await useRecipe();
 
       <RecipeIngredients :ingredients="recipe.ingredients" />
     </div>
-    <div class="flex flex-col items-center">
+    <div class="flex flex-col items-center p-4">
       <h2 class="prose lg:prose-xl">Instructions</h2>
       <p class="prose">{{ recipe.instructions }}</p>
     </div>