How to handle markdown content in Nuxt3 using nuxt/content

Question

I'm trying to display some images and title from my markdown content in my nuxt3 project.

 ---
title: A selection of our customers

images:
  - /images/brands/brand-1.png
  - /images/brands/brand-2.png
  - /images/brands/brand-3.png
  - /images/brands/brand-4.png
---

It's my content/home/brands.md file.

This is my index.vue

<template>
  <HeroSection />
  <BrandSection :brands="brands" />
</template>

<script setup>
// Fetch brands data from content directory
const { data: brands } = await useAsyncData('brands', () => queryContent('/home/brands').findOne())
console.log(brands.value)
</script>
<style scoped>
</style>

And this is brandSection.vue

<template>
    <div class="bg-white-secondary">
        <div class="max-w-[1440px] mx-auto px-[100px] py-[80px]">
            <h2 class="text-2xl font-medium mb-8">{{ brands?.title }}</h2>
            <div class="flex gap-[100px] items-center justify-center">
                <NuxtImg 
                    v-for="(image, index) in brands?.images" 
                    :key="index"
                    :src="image" 
                    :alt="'Brand logo'"
                    class="h-[50px] object-contain" 
                />
            </div>
        </div>
    </div>
</template>
<script setup>
const {brands} = defineProps(['brands'])
</script>
<style scoped></style>

But it isn't displayed.

Please help me to fix this issue and render correctly.

Answer 1

I just solved problem. In nuxt content v3, queryContent() API is replaced with new queryCollection() https://content.nuxt.com/docs/getting-started/migration