Mike Posts - Answer Overflow

Mike

•Created by Mike on 2/26/2025 in #❓・help

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

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

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

9 replies

NNuxt

•Created by Mike on 2/24/2025 in #❓・help

Nuxt routing when using content folder

6 replies

Gaming

Programming