design card component

components/recipe/card.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title: string;
+  pictureUrl: string;
+  videoUrl: string;
+  category: string;
+  origin: string;
+}>();
+</script>
+
+<template>
+  <div class="card-body items-center text-center">
+    <h2 class="card-title">{{ title }}</h2>
+    <figure class="px-10 py-5">
+      <NuxtImg :src="pictureUrl" alt="Shoes" class="rounded-xl" />
+    </figure>
+    <div class="card-actions space-between">
+      <NuxtLink class="badge badge-outline" :to="videoUrl">
+        <Icon name="cib:youtube" color="red" />
+      </NuxtLink>
+      <div class="badge badge-secondary">
+        <Icon name="cil:apple" /> {{ category }}
+      </div>
+      <div class="badge badge-secondary">
+        <Icon name="cil:location-pin" /> {{ origin }}
+      </div>
+    </div>
+  </div>
+</template>

composables/useRecipe.ts

@@ -0,0 +1,28 @@
+type Recipe = {
+  title: string;
+  pictureUrl: string;
+  videoUrl: string;
+  category: string;
+  origin: string;
+};
+
+export default async function () {
+  const { data, error } = await useAsyncData("random", () => {
+    const config = useRuntimeConfig();
+    return $fetch(`${config.apiUrl}random.php`);
+  });
+
+  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,
+  });
+
+  return {
+    recipe,
+    error,
+  };
+}

nuxt.config.ts

@@ -2,7 +2,7 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   css: ["~/assets/css/main.css"],
-  modules: ["@nuxt/eslint", "@nuxt/image"],
+  modules: ["@nuxt/eslint", "@nuxt/image", "nuxt-icon"],
   postcss: {
     plugins: {
       tailwindcss: {},
@@ -16,4 +16,4 @@ export default defineNuxtConfig({
     public: {},
   },
   ssr: true,
-});
+});

package.json

@@ -16,6 +16,7 @@
     "@nuxt/eslint": "^0.3.10",
     "@nuxt/image": "^1.6.0",
     "nuxt": "^3.11.2",
+    "nuxt-icon": "^0.6.10",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
   },

pages/random.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
-const { data, pending, error, refresh } = await useFetch(
-  "https://www.themealdb.com/api/json/v1/1/random.php",
-);
+const { recipe, error } = await useRecipe();
 </script>
 
 <template>
-  <div>
-    <div v-if="pending">Loading</div>
-    <div v-else-if="error">Failed: {{ error }}</div>
-    <pre v-else>
-      {{ data?.meals?.[0] }}
-    </pre>
-  </div>
+  <div v-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"
+        :category="recipe.category"
+        :origin="recipe.origin"
+      />
+    </div>
+  </section>
 </template>