Exposed values in a queryCollection

---
title: "Chicken Honey Mustard"
description: "A delicious honey mustard recipe"
image: "/img/chicken-honey-mustard.jpg"
---

<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>