<ContentQuery> example not working

[cossssmin]

Environment

• Operating System: Windows_NT
• Node Version: v18.12.1
• Nuxt Version: 3.6.2
• Nitro Version: 2.5.2
• Package Manager: npm@8.4.0
• Builder: vite
• User Config: content, css, experimental, modules, postcss, nitro, runtimeConfig, typescript
• Runtime Modules: ./modules/routes-list, ./modules/docs-navigation, ./modules/github-release, ./modules/shiki/shiki-custom, @nuxt/content@2.7.0
• Build Modules: -

Reproduction

content/code/template.md:

	```js
	module.exports = {}
	```

page.vue

<ContentQuery path="code/template" v-slot="{ data }">
  <ContentRenderer :value="data" />
</ContentQuery>

Describe the bug

Taken from the documentation example.

The above just prints out an object like:

{
  "message": "You should use slots with <ContentRenderer>",
  "value": [
    {
      "_path": "/code/template",
      "_dir": "code",
      "_draft": false,
      "_partial": false,
      "_locale": "",
	  // ...

If I try using a slot with <ContentRedererMarkdown> like shown in the docs:

<ContentQuery path="code/template" v-slot="{ data }">
  <ContentRenderer :value="data">
    <ContentRendererMarkdown :value="data" />
  </ContentRenderer>
</ContentQuery>

I get a build error with the following log:

[Vue warn]: Component ContentRendererMarkdown is missing template or render function.

I just have an .md file that I want to render with syntax highlighting in a .vue page, what am I doing wrong?

Additional context

No response

Logs

No response

[Barbapapazes]

Hello,

In fact, there is an issue with the example (I will create a PR to fix it).

By default, the ContentQuery will fetch all returning an array (https://github.com/nuxt/content/blob/main/src/runtime/components/ContentQuery.vue#L77). We can use the props find="one" to force the query to return only one item.

The solution : https://stackblitz.com/edit/github-xquzdt?file=pages%2Findex.vue