<script setup lang="ts">
const { data: recipes } = await useAsyncData('recipes', () => queryCollection('recipes').all())
</script>
<template>
<div class="container">
<ul v-if="recipes" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<li v-for="recipe in recipes" :key="recipe.id">
<NuxtLink :to="recipe.path">
<!-- todo: :src gives IDE error: `Vue: Type unknown is not assignable to type string | undefined`. Find out why and how to fix it. -->
<NuxtPicture :src="recipe.meta.image" />
<h2 class="font-bold">
{{ recipe.title }}
</h2>
{{ recipe.description }}
</NuxtLink>
</li>
</ul>
</div>
</template>
<script setup lang="ts">
const { data: recipes } = await useAsyncData('recipes', () => queryCollection('recipes').all())
</script>
<template>
<div class="container">
<ul v-if="recipes" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<li v-for="recipe in recipes" :key="recipe.id">
<NuxtLink :to="recipe.path">
<!-- todo: :src gives IDE error: `Vue: Type unknown is not assignable to type string | undefined`. Find out why and how to fix it. -->
<NuxtPicture :src="recipe.meta.image" />
<h2 class="font-bold">
{{ recipe.title }}
</h2>
{{ recipe.description }}
</NuxtLink>
</li>
</ul>
</div>
</template>