NuxtN
Nuxt•11mo ago•
8 replies
Mike

Exposed values in a queryCollection

Hi, I'm trying to output my Front Matter data in a .vue file, but something seems off. I'm wondering if I might have missed something that explains this behavior.

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


example .vue file:
<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>

In the example above, I can access recipe.title and recipe.description directly, but I have to use recipe.meta.image to access the image value. Is this the expected behavior for @nuxt/content? Shouldn't the image field be available in the same way as title and description?

Any help in understanding why this happens or how to configure it differently (better?) would be appreciated!
Was this page helpful?