ContentRenderer not working as expected

[miket2marcom]

Environment

---

• Operating System: Darwin
• Node Version: v16.17.1
• Nuxt Version: 3.0.0-rc.11
• Nitro Version: 0.5.4
• Package Manager: npm@8.15.0
• Builder: vite
• User Config: modules
• Runtime Modules: @nuxt/content@2.1.1
• Build Modules: -

---

Reproduction

Description below, reproduction link of this here: https://stackblitz.com/edit/github-lvjgwk

I created a fresh nuxt-content project based on the guide here: https://content.nuxtjs.org/get-started

Rendering the 2 initial markdown pages in content/ (index.md & about.md) works well with the ContentDoc component out of the box. But we need to use ContentRenderer in our project to query content from various sources.

On the [...slug].vue page, I replaced ContentDoc with ContentRenderer, making my [...slug].vue page look like this:

<template>
  <main>
    <ContentRenderer :value="page" />
  </main>
</template>

<script setup>
const route = useRoute()
const { data: page } = await useAsyncData('page-data', () => queryContent('/', ...route.params.slug).findOne())
</script>

I still have the same 2 markdown files in content/, but now the pages aren't rendering correctly and navigation between them is broken. Only index.md ever renders, regardless if I'm on http://localhost:3002/ or http://localhost:3002/about, and there are no console errors.

Am I missing something here to get ContentRenderer working? Any help here would be greatly appreciated. Thanks!

Describe the bug

The ContentRenderer component does not seem to be fully working. I believe I am using it according to the docs.

Additional context

FYI this is related to issue #1565 - but here I've just made a new nuxt-content project to recreate it without any other variables from our production project. And I made a quick environment to reproduce this: https://stackblitz.com/edit/github-lvjgwk

Logs

No response

[acidjazz]

@miket2marcom did you try something like

queryContent().where({slug: route.params['...slug']}).findOne()

[miket2marcom]

@miket2marcom did you try something like

queryContent().where({slug: route.params['...slug']}).findOne()

Yes, when I try that I get this console warning and error, and the post page doesn't display:

[Vue warn]: Unhandled error during execution of setup function 
  at <ContentRendererMarkdown value= {_path: '/blog/testing-blog', _draft: false, _partial: false, _locale: 'en', _empty: false, …} excerpt=false tag="div"  ... > 
  at <ContentRenderer key=2 id="content-renderer" value= {_path: '/blog/testing-blog', _draft: false, _partial: false, _locale: 'en', _empty: false, …} > 
  at <[...slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > > 
  at <Anonymous key="/resources/blog/testing-blog" routeProps= {Component: {…}, route: {…}} pageKey="/resources/blog/testing-blog" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Anonymous > 
  at <Anonymous > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'accept')
    at ProseH2.vue:4:15

[farnabaz]

This happens because you are using a unique key for useAsyncData, useAsyncData uses this key to cache the async task (in this case content query) and in consequent calls, it will use cached value and will not re-run the task.

You need to change the key to dynamic to prevent invalid caching,
For example, you can add the slug to the key:

const { data: page } = await useAsyncData(
  'page-data-' + route.params.slug,
  () => queryContent('/', ...route.params.slug).findOne()
);

You can see the result here: https://stackblitz.com/edit/github-lvjgwk-6bm1pp?file=pages%2F[...slug].vue

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.