how to use slugs

[AbhimanyuAryan]

I have an empty pages/deeplearning/_slug.vue. I don't know what to put inside it. The documentation is not very helpful

I have my blog posts in content/deeplearning/post1.md and content/deeplearning/post2.md

pages/deeplearning.vue

<template>
  <main>
    <ContentList path="/deeplearning" v-slot="{ list }">
      <div class="cards">
        <nuxt-link
          v-for="item in list"
          :key="item._id"
          :to="`/deeplearning/${item._path?.split('/').pop() || 'fallback-path'}`"
          class="card-link"
        >
          <div class="card">
            <h2>{{ item.title }}</h2>
            <p>{{ item.description }}</p>
            <p>Author: {{ item.author }}, Date: {{ new Date(item.date).toLocaleDateString() }}</p>
          </div>
        </nuxt-link>
      </div>
    </ContentList>
  </main>
</template>

The goal is to show markdown content on /post1 route and /post2 route

here's my blog: https://github.com/AbhimanyuAryan/abhimanyuaryan.github.io

[manniL]

You would define your file as [slug].vue in Nuxt 3. Take a look at the routing docs for more info.

[farnabaz]

_slug is Nuxt 2 style, You need to define your page in Nuxt 3 way [slug].vue.
Inside [slug].vue you can sue <ContentDoc /> to render the content:

<template>
  <main>
    <ContentDoc />
  </main>
</template>

ContentDoc uses $route.path to find and render the content. See

[AbhimanyuAryan]

Hi @farnabaz @manniL thanks for the reply. I used [slug].vue but it doesn't show content of post1 when I click on the card. As you can see the gif

[farnabaz]

Try moving deeplearning.vue to deeplearning/index.vue

[AbhimanyuAryan]

Thanks @farnabaz 🙏🏻 it worked 🎉