find meals per id

pages/[id].vue

@@ -1,11 +1,19 @@
 <script setup lang="ts">
 const { params } = useRoute();
-const { recipe, pending, error } = await useRecipe("lookup", params.id);
+const id = params.id;
+
+const {
+  data: recipe,
+  pending,
+  error,
+} = await useFetch(`/api/recipes/${id}`, {
+  lazy: true,
+});
 </script>
 
 <template>
   <div v-if="pending">Loading</div>
-  <div v-else-if="error">Failed: {{ error }}</div>
+  <div v-else-if="error">Failed: {{ error.statusMessage }}</div>
   <section v-else>
     <Recipe :recipe="recipe" />
   </section>

server/api/recipes.get.ts

@@ -1,9 +1,10 @@
 import { parseRecipeData } from "~/utils/recipes";
+import type { Meal } from "~/types/recipe";
 
 export default defineEventHandler(async (_event) => {
   const { apiUrl } = useRuntimeConfig();
 
-  const data = await $fetch<{ meals: unknown }>(
+  const data = await $fetch<{ meals: Meal[] }>(
     new URL("random.php", apiUrl).toString(),
   );
 

server/api/recipes/[id].get.ts

@@ -0,0 +1,20 @@
+import { parseRecipeData } from "~/utils/recipes";
+import type { Meal } from "~/types/recipe";
+
+export default defineEventHandler(async (event) => {
+  const { apiUrl } = useRuntimeConfig();
+  const id = getRouterParam(event, "id");
+
+  const data = await $fetch<{ meals: Meal[] }>(
+    new URL(`lookup.php?i=${id}`, apiUrl).toString(),
+  );
+  if (!data?.meals) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: "Recipe not found",
+    });
+  }
+
+  const recipes = parseRecipeData(data);
+  return recipes[0];
+});

types/recipe.ts

@@ -1,6 +1,7 @@
 import { z } from "zod";
 
 export type Recipe = {
+  id: string;
   title: string;
   pictureUrl: string;
   videoUrl: string;

utils/recipes.ts

@@ -17,6 +17,7 @@ export function parseRecipeData(data: ApiResponse): Recipe[] {
     }
 
     return {
+      id: meal.idMeal,
       title: meal.strMeal,
       pictureUrl: meal.strMealThumb,
       videoUrl: meal.strYoutube,