Auto generated slug property for each document based on file name or title
It would be nice to have auto generated slugs like we did back in Content V1.
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
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_pathwhich is same as V1slugand 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.
You can use path prefix to search for your contents:
Checkout ContentList docs
<ContentList path="/blog">...</ContentList/>
or using composable:
queryContent('/blog')
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.
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>