admin管理员组

文章数量:1126104

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>

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>

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'
---

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

I have tried using the useRoute composable and passing page as the value.

本文标签：

版权声明：本文标题：vue.js - How do I get the page to render via the slug set as a frontmatter property in Nuxt Content? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736680057a1947375.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。