content icon indicating copy to clipboard operation
content copied to clipboard

Auto generated slug property for each document based on file name or title

Open NukeJS opened this issue 3 years ago • 5 comments

It would be nice to have auto generated slugs like we did back in Content V1.

NukeJS avatar May 25 '22 19:05 NukeJS

Content v2 have same auto generated meta for each file. (names are changes though, and auto generated fields prefixed with _ to prevent from possible conflict with non-generated content meta) You can use _path which is same as V1 slug and generates from file path

farnabaz avatar May 30 '22 10:05 farnabaz

Content v2 have same auto generated meta for each file. (names are changes though, and auto generated fields prefixed with _ to prevent from possible conflict with non-generated content meta) You can use _path which is same as V1 slug and generates from file path

But what if I want to put my content files in let's say content/blog and have the blog posts at pages/[slug].vue.

NukeJS avatar May 30 '22 19:05 NukeJS

You can use path prefix to search for your contents:

Checkout ContentList docs

<ContentList path="/blog">...</ContentList/>

or using composable:

queryContent('/blog')

farnabaz avatar May 31 '22 07:05 farnabaz

You can use path prefix to search for your contents:

Checkout ContentList docs

<ContentList path="/blog">...</ContentList/>

or using composable:

queryContent('/blog')

But if I do it like that, e.g.

pages/blog.vue

<template>
  <div v-for="post in posts" :key="post._id">
    <NuxtLink :to="post._path">
      {{ post.title }}
    </NuxtLink>
  </div>
</template>

<script setup lang="ts">
const { data: posts } = useAsyncData('blog', () =>
  queryContent('/blog').where({ _draft: false }).find()
);
</script>

And my content blog files are located at content/blog but I want my posts located at pages/[slug].vue, the NuxtLink will still go to /blog/some-page instead of having a slug that's just the file name to go to /some-page. This wouldn't work.

NukeJS avatar Jun 05 '22 21:06 NukeJS

You need to remove /blog from _path and inside [...slug].vue prefix all routes with blog.

<template>
  <div v-for="post in posts" :key="post._id">
    <NuxtLink :to="post._path.substring(5)">
      {{ post.title }}
    </NuxtLink>
  </div>
</template>

[..slug].vue

<template>
  <contentDoc :path="`/blog${$route.path}`" />
</template>

farnabaz avatar Jun 07 '22 13:06 farnabaz