N
Nuxt•6d ago
Dog

Actual files not showing with Content v3

I have 2 Markdown files in /content/jobs, and I'm just trying to show them in a list in a page, but I can't figure out how to do this. Everything I've tried has either errored somewhere, or only showed one result, with a title of Jobs and a path of /jobs. Here's my current code, copied from the docs and slightly modified: pages/jobs/index.vue: 
<script setup lang="ts">
const { data } = await useAsyncData('navigation', () => {
    return queryCollectionNavigation('jobs', ['description']).order('title', 'ASC');
});
</script>

<template>
    <nav class="flex flex-col gap-4 p-8 pt-[115px]">
        <ul v-if="data">
            <li v-for="item in data" :key="item.path">
                <NuxtLink :to="item.path">
                    {{ item.title }}
                </NuxtLink>
                <p v-if="item.description">{{ item.description }}</p>
            </li>
        </ul>
        <p v-else>Nothing found</p>
    </nav>
</template>
<script setup lang="ts">
const { data } = await useAsyncData('navigation', () => {
    return queryCollectionNavigation('jobs', ['description']).order('title', 'ASC');
});
</script>

<template>
    <nav class="flex flex-col gap-4 p-8 pt-[115px]">
        <ul v-if="data">
            <li v-for="item in data" :key="item.path">
                <NuxtLink :to="item.path">
                    {{ item.title }}
                </NuxtLink>
                <p v-if="item.description">{{ item.description }}</p>
            </li>
        </ul>
        <p v-else>Nothing found</p>
    </nav>
</template>
/content.config.ts: 
import { defineContentConfig, defineCollection } from '@nuxt/content';

export default defineContentConfig({
    collections: {
        jobs: defineCollection({
            type: 'page',
            source: 'jobs/*.md',
        }),
    },
});
import { defineContentConfig, defineCollection } from '@nuxt/content';

export default defineContentConfig({
    collections: {
        jobs: defineCollection({
            type: 'page',
            source: 'jobs/*.md',
        }),
    },
});
The result of this is attached
No description
No description
No description
4 Replies
kapa.ai
kapa.ai•6d ago
Hi @Dog. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the knowledge sources available, it appears that you're using Nuxt Content v3 and experiencing issues with displaying your Markdown files. Let's address this problem step by step. 1. First, it's important to note that the queryCollectionNavigation method you're using is not part of the standard Nuxt Content v3 API. The Content Navigation documentation doesn't mention this method. Instead, you should use the queryContent composable to fetch your content. 2. Here's a modified version of your code that should work with Nuxt Content v3: 
<script setup lang="ts">
const { data } = await useAsyncData('jobs', () => {
  return queryContent('jobs').sort({ title: 1 }).find()
})
</script>

<template>
  <nav class="flex flex-col gap-4 p-8 pt-[115px]">
    <ul v-if="data && data.length">
      <li v-for="item in data" :key="item._path">
        <NuxtLink :to="item._path">
          {{ item.title }}
        </NuxtLink>
        <p v-if="item.description">{{ item.description }}</p>
      </li>
    </ul>
    <p v-else>Nothing found</p>
  </nav>
</template>
<script setup lang="ts">
const { data } = await useAsyncData('jobs', () => {
  return queryContent('jobs').sort({ title: 1 }).find()
})
</script>

<template>
  <nav class="flex flex-col gap-4 p-8 pt-[115px]">
    <ul v-if="data && data.length">
      <li v-for="item in data" :key="item._path">
        <NuxtLink :to="item._path">
          {{ item.title }}
        </NuxtLink>
        <p v-if="item.description">{{ item.description }}</p>
      </li>
    </ul>
    <p v-else>Nothing found</p>
  </nav>
</template>
3. Regarding your content.config.ts, while it's correctly defining a collection, Nuxt Content v3 doesn't require this configuration for basic usage. You can remove this file if you're not using any advanced collection features. 4. Make sure your Markdown files in the /content/jobs directory have the correct front matter. Each file should have at least a title field, for example: 
---
title: Job Title
description: Job description
---

Job content goes here...
---
title: Job Title
description: Job description
---

Job content goes here...
5. If you're still not seeing your content, try running nuxt clean to clear the cache, then restart your development server. 6. If the problem persists, you might want to check the Content Directory documentation to ensure your files are in the correct location and format. If these steps don't resolve your issue, it's possible that there might be a configuration problem elsewhere in your Nuxt application. In that case, you might want to create a minimal reproduction of your issue and seek further assistance from the Nuxt community or support channels. Content Navigation documentation Content Directory documentation ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•6d ago
<@634054240557596672> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Dog
DogOP•6d ago
that's outdated
leamsigc
leamsigc•5d ago
can it be that you are missing the where clouse ?

Did you find this page helpful?