I am trying nuxt content module. I created a directory called "articles" inside content folder cotaining 2 md files with some dummy data. then, inside pages I have a folder called "tutorials" which contains "_slug.vue" and index.vue

the index page shows only the title of the articles and it works fine. every title links to the actual article using path/slug. the problem is that I get page not found. here is my code: index.vue:

<template>
  <div>
    <article v-for="article of articles" :key="article.id">
      <nuxt-link :to="`/tutorials/${article.slug}`">
        {{ article.slug }}
      </nuxt-link>
    </article>
  </div>
</template>

<script>
export default {
  async asyncData({ $content, params }) {
    const articles = await $content('articles', params.slug)
      .only(['title', 'slug'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return {
      articles,
    }
  },
}
</script>

_slug.vue:

<template>
  <div>
    <nuxt-content :document="article" />
  </div>
</template>

<script>
export default {
  async asyncData({ $content, params }) {
    const article = await $content('articles', params.slug).fetch()

    return {
      article,
    }
  },
}
</script>

<style></style>

thank you.