8000 fetch food api · WilliamBostrom/Nuxt-vue@c85bfcf · GitHub
[go: up one dir, main page]
Skip to content

Commit c85bfcf

Browse files
WilliamBostromWilliamBostrom
committed
fetch food api
1 parent d45c206 commit c85bfcf

File tree

3 files changed

+42
-8
lines changed

3 files changed

+42
-8
lines changed

‎pages/menu/[id].vue

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
<template>
2-
<div>food details for {{ id }}</div>
2+
<div v-if="recipe">
3+
<div>Food details for {{ id }}</div>
4+
<div>{{ recipe.name }}</div>
5+
</div>
6+
<div v-else>Loading...</div>
37
</template>
48

59
<script setup lang="ts">
610
const { id } = useRoute().params;
711
definePageMeta({
812
layout: "menu",
913
});
14+
15+
const { data: recipe } = await useFetch<Recipe>(
16+
`https://dummyjson.com/recipes/${id}`
17+
);
1018
</script>
1119

1220
<style scoped></style>

‎pages/menu/index.vue

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
11
<template>
2-
<div>
3-
<h2>Food</h2>
4-
<p>
5-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae temporibus
6-
repellat commodi voluptatem laborum atque nobis eum at. Nesciunt, culpa.
7-
</p>
8-
</div>
2+
<main>
3+
<div class="grid grid-cols-4 gap-5">
4+
<div v-for="recipe in recipes" :key="recipe.id">
5+
<NuxtLink :to="`/menu/${recipe.id}`">{{ recipe.name }}</NuxtLink>
6+
</div>
7+
</div>
8+
</main>
99
</template>
1010

1111
<script setup lang="ts">
1212
definePageMeta({
1313
layout: "menu",
1414
});
15+
16+
// Hämtar recept
17+
const { data } = await useFetch<{ recipes: Recipe[] }>(
18+
"https://dummyjson.com/recipes"
19+
);
20+
21+
const recipes: Recipe[] = data.value?.recipes || [];
22+
console.log(recipes);
1523
</script>
1624

1725
<style scoped>

‎types/recipe.d.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
interface Recipe {
2+
id: number;
3+
name: string;
4+
caloriesPerServing: number;
5+
cookTimeMinutes: number;
6+
cuisine: string;
7+
difficulty: string;
8+
image: string;
9+
ingredients: string[];
10+
instructions: string[];
11+
mealType: string[];
12+
prepTimeMinutes: number;
13+
rating: number;
14+
reviewCount: number;
15+
servings: number;
16+
tags: string[];
17+
userId: number;
18+
}

0 commit comments

Comments
 (0)
0