[DOC] Example section for ContentQuery API uses illegal syntax

[Oddward]

Environment

• Operating System: Windows_NT
• Node Version: v18.14.0
• Nuxt Version: 3.0.0
• Nitro Version: 1.0.0
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: nitro, modules, app
• Runtime Modules: @nuxtjs/tailwindcss@6.4.0, @nuxt/content@2.4.3, nuxt-icon@0.2.11
• Build Modules: -

Reproduction

1. Use the given example in/similar syntax to the example in the ContentQuery API page as the template for your component
2. Use component in a page

It marks syntax error in the editor and shows compilation error on the site.

Describe the bug

A page was refusing to load for ages coz of a component based on the example. Turns out Vue doesn't allow this:

"If you are mixing named slots with the default scoped slot, you need to use an explicit <template> tag for the default slot. Attempting to place the v-slot directive directly on the component will result in a compilation error. This is to avoid any ambiguity about the scope of the props of the default slot."

Docs example:

<template>
  <main>
    <ContentQuery path="/about/authors" :where="{ type: 'csv' }" v-slot="{ data }">
      <ul>
        <li v-for="author of data" :key="author.name">
          {{ author.name }}
        </li>
      </ul>
      <template #not-found>
        <p>No authors found.</p>
      </template>
    </ContentQuery>
  </main>
</template>

Suggestion:

<template>
  <main>
    <ContentQuery path="/about/authors" :where="{ type: 'csv' }">
      <template v-slot="{ data }"> // or #default
        <ul>
          <li v-for="author of data" :key="author.name">
            {{ author.name }}
          </li>
        </ul>
      </template>
      <template #not-found>
        <p>No authors found.</p>
      </template>
    </ContentQuery>
  </main>
</template>

Additional context

I'm new to Vue & Nuxt. Still couldn't get any content from ContentQuery or queryContent, but the syntax error was solved 😅

Logs

No response