Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-01-22 11:22:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: update nuxt/content example

Browse Source
This commit is contained in:
Daniel Roe 2025-01-20 13:50:01 +00:00
parent 09c3f79eff
commit 5429876278
No known key found for this signature in database
GPG Key ID: 3714AB03996F442B
1 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
docs/2.guide/2.directory-structure/1.content.md
View File

@ -36,14 +36,24 @@ The module automatically loads and parses them.
## Render Content
To render content pages, add a [catch-all route](/docs/guide/directory-structure/pages/#catch-all-route) using the [`<ContentDoc>`](https://content.nuxt.com/components/content-doc) component:
To render content pages, add a [catch-all route](/docs/guide/directory-structure/pages/#catch-all-route) using the [`<ContentRenderer>`](https://content.nuxt.com/docs/components/content-renderer) component:
```vue [pages/[...slug\\].vue]
<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
return queryCollection('content').path(route.path).first()
})
</script>
<template>
<main>
<!-- ContentDoc returns content for `$route.path` by default or you can pass a `path` prop -->
<ContentDoc />
</main>
<div>
<header><!-- ... --></header>
<ContentRenderer v-if="page" :value="page" />
<footer><!-- ... --></footer>
</div>
</template>
```