peoray
peoray
Explore posts from servers
NNuxtNNovu
PostsComments
NNuxt
Created by peoray on 1/8/2025 in #❓・help
Nuxt Content: How do I get the page to render via the slug set as a frontmatter property?
In my blog/index.vue, I have the following: 
<script setup>
const contentQuery = await queryContent('blog')
  .where({ draft: false })
  .sort({ date: 1 })
  .find()
</script>

<template>
  <div>
    <ul class="list-disc space-y-2">
      <li
        v-for="article in contentQuery"
        :key="article.slug"
        class="text-lg font-medium"
      >
        <NuxtLink :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLink>
      </li>
    </ul>
  </div>
</template>
<script setup>
const contentQuery = await queryContent('blog')
  .where({ draft: false })
  .sort({ date: 1 })
  .find()
</script>

<template>
  <div>
    <ul class="list-disc space-y-2">
      <li
        v-for="article in contentQuery"
        :key="article.slug"
        class="text-lg font-medium"
      >
        <NuxtLink :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLink>
      </li>
    </ul>
  </div>
</template>
In the /blog/[...slug].vue, I have the following: 
<template>
  <main class="prose mx-auto">
    <ContentDoc v-slot="{ doc }">
      <article>
        <h1>{{ doc.title }}</h1>
        <ContentRenderer :value="doc" class="text-[17px]" />
      </article>
    </ContentDoc>
  </main>
</template>
<template>
  <main class="prose mx-auto">
    <ContentDoc v-slot="{ doc }">
      <article>
        <h1>{{ doc.title }}</h1>
        <ContentRenderer :value="doc" class="text-[17px]" />
      </article>
    </ContentDoc>
  </main>
</template>
In my article markdown file, I have the following: 
---
title: 'Blog Title Goes Here'
description: 'meta description of the page'
draft: false
date: '2024-10-30'
slug: 'hello-world'
---
---
title: 'Blog Title Goes Here'
description: 'meta description of the page'
draft: false
date: '2024-10-30'
slug: 'hello-world'
---
The name of the markdown file is this-is-the-beginning.md and the page works as /blog/this-is-the-beginning, but I want it to use the slug from the frontmatter instead and display the content at /blog/hello-world. At the moment, when it goes to /blog/hello-world, I get a Document not found page error
21 replies