When navigating to nuxt content page I get "You should use slots with <ContentRenderer>"

[SleepiestAdam]

Environment

• Operating System: Darwin
• Node Version: v20.3.1
• Nuxt Version: 3.6.1
• Nitro Version: 2.5.2
• Package Manager: npm@9.7.2
• Builder: vite
• User Config: ssr, fontsPath, modules, i18n, router, delayHydration, routeRules, hooks, schemaOrg, image, content, css, googleFonts, alias, app, plugins, webpack, sitemap
• Runtime Modules: @nuxtjs/tailwindcss@6.8.0, @nuxt/content@2.7.0, @pinia/nuxt@0.4.11, @nuxtjs/google-fonts@3.0.1, @nuxtjs/i18n@8.0.0-beta.12, @nuxt/image@1.0.0-rc.1, nuxt-icon@0.1.8, nuxt-schema-org@2.2.0, @funken-studio/sitemap-nuxt-3@4.0.4, @vueuse/motion/nuxt@2.0.0, nuxt-delay-hydration@1.2.1
• Build Modules: -

Reproduction

Fairly obvious, seems to have been reported by others in the last day. Nothing fancy going on on either of the pages with the bug in question. e.g. #1154 (comment)

It only appears to occur when deployed, when running npm run dev - all seems to work fine.

Describe the bug

When navigating to a page that uses Nuxt Content after deployment - if you go directly to the page via a url then it loads fine, but if you navigate to the page from like a blog root or something then it shows. Happening with the latest nuxt (3.6.1) and latest nuxt-content (2.7.0):

{
"message": "You should use slots with ",
...
}

Example Reproduction

Note: I've changed the links from NuxtLink > a to negate the issues for our users, so these are screenshots from before this hacky temporary fix was added.

When going directly to the post at https://www.sleepiest.com/blog/the-science-of-sleep/how-sleep-and-allergies-interact:

When navigating to the post from say https://www.sleepiest.com/blog and clicking on the first post is when the bug arises:

Additional context

No response

Logs

No response

[SleepiestAdam]

I've narrowed the issue down to:

const { data } = await useAsyncData(content-${route.path}, () => {
return queryContent().where({ _path: route.path }).findOne();
});

Returning an array with absolutely all the content rather than the singular bit of content that was requests. This is also replicated on other pages where it's filtering by category - in some instances it doesn't - instead displaying all content. Almost like when rendered on the client it's just ignoring everything apart from "queryContent()".

This appears to only occur when the page is loaded by the client. When I navigate directly to the page in question it all works as expected (as in screenshots above).

[riderx]

I have the same issue... I'm willing to support nuxt to get this fixed @atinux my business SEO depend on this

[atinux]

It might happen when there is a new redeploy and you are navigating on client-side, can you confirm?

[cossssmin]

EDIT: fixed by running nuxt generate instead.

Having this same issue, with both <ContentRenderer /> and <ContentList /> when running nuxt build, can be seen on the homepage here for the code blocks and the "Maizzle Guides" section towards the end:

https://deploy-preview-136--maizzle-docs.netlify.app/

Of course, it all works fine when developing locally.

Reproduction

See this PR: maizzle/maizzle.com#136

And this particular commit: maizzle/maizzle.com@48404cb (#136)

ContentRenderer

Code used (copied from docs page):

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

But this doesn't work either:

<ContentQuery path="code/environment" find="one">
  <template #default="{ data }">
    <ContentRenderer :value="data" />
  </template>
</ContentQuery>

code/environment is just a .md file with a fenced code block in it:

	```js
	module.exports = {
	  build: {
	    templates: {
	      source: 'src/templates',
	      destination: {
	        path: 'build_production',
	        extension: 'html',
	      },
	      assets: {
	        source: 'src/images',
	        destination: 'images',
	      },
	    },
	  }
	}
	```

Result:

ContentList

Code used (also copied from docs page):

<ContentList :query="guides" v-slot="{ list }">
  <div
    v-for="guide in list"
    :key="guide.title"
  >
    ...
  </div>
</ContentList>

But this doesn't work either:

<ContentList :query="guides">
  <template #default="{ list }">
    <div
      v-for="guide in list"
      :key="guide.title"
    >
		...
    </div>
  </template>
</ContentList>

Result:

System info

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

[riderx]

@atinux it's 100% of the time for me :/
i use netlify edge, maybe that can help

[riderx]

with the last change i made, (disable cloudflare optimization as suggessted in the doc and discord) i have now infinite loading here: https://capgo.app/blog/
i also tried to make my own endpoint instead of the one from nuxt content but with no luck.

[riderx]

On my side i managed to fix partially the issue. by disabling the netlify-edge preset.
Now if i clean cache i don't have issue and can navigate to list and one blog article.
But after the app cache is fully feed the navigation is dead.

How to reproduce:
go to https://capgo.app ( 12.4 mb cache)
or https://captime.app (2.4 mb cache)

open console and empty cache
Reload page ang click fast to blog and first article.
It should display
wait the cache fully loaded.
Go home again and do same path
blog article will redirect home

CleanShot.2023-08-06.at.17.05.01.mp4

It seems if I disable PWA config (who never change since a year)
It fixes the loading issue, this issue looks to have so many implications :/

[Sailsnake-studio]

Im also running into the same issue. Switched to Decap CMS, so my files are in markdown and i cant seem to find a way to render the markdown bit properly. Rendering the string is not an issue offcourse, but when using <ContentRenderer /> i get the "you should use slots" error. This happens in dev and generated mode.

Examples:

const md = "#testing a string"

<ContenRenderer :value="md" />
// returns: "You should use slots with <ContentRenderer>"

<ContenRendererMarkdown :value="md" />
// returns: "Cannot read properties of undefined (reading 'replace')"

package.json:

    "@nuxt/content": "^2.8.2",
    "@types/node": "^18",
    "nuxt": "^3.7.1",

[james-tyner]

I have this same issue with a <ContentList> when deployed on Netlify. It works properly when testing locally. My site is being built using the nuxi generate command with Node 18.17.1 and npm 9.6.7.

[atinux]

Does it happen when you navigate on client-side and a new generate has been deployed in-between?

[riderx]

@atinux for me that was always happening, no matter the env even in local dev

[cowboyxup]

I have the same issue, but only if the page was directly requested from the server.
Somehow by using LazyContentDoc instead of ContentDoc i was able to fix this issue at the moment.

[bryancurran]

also have the same issue. works locally but when building it just shows:

{
"message": "You should use slots with <ContentList>",
"slot": "not-found"
}

Edit: In my case it seems the content is actually missing from the build for some reason, because adding the #not-found template shows the not-found message. So for me the issue really is that the entire content directory isn't being included in the build.. idk why

[bryancurran]

I have this same issue with a <ContentList> when deployed on Netlify. It works properly when testing locally. My site is being built using the nuxi generate command with Node 18.17.1 and npm 9.6.7.

Did you ever end up finding a solution for this?

[brianmaierjr]

Also having the same issue deploying to netlify and with a <ContentList>. Works locally as well.

[RicoChr]

I had the same error message. My original code was:

<ContentDoc
      :path="contentPath"
    >
  <template v-slot="doc">
    <article>
      <h1>{{ doc.title }}</h1>
      <ContentRenderer :value="doc" />
    </article>
  </template>
</ContentDoc>

I added curly brackets to the 'doc' inside the 'template' tag like this:

<ContentDoc
      :path="contentPath"
    >
  <template v-slot="{ doc }">
    <article>
      <h1>{{ doc.title }}</h1>
      <ContentRenderer :value="doc" />
    </article>
  </template>
</ContentDoc>

That solved it. I hope it helps some of you.

[cco3]

I hope it helps some of you.

Thanks. I'd like to be able to use ContentDoc without explicitly using the slot...that is supposed to be supported according to the docs.

[mewforest]

Also having the same issue deploying to netlify and with a <ContentList>. Works locally as well.

Same for me, but has the error appears locally both for <ContentList> and <ContentList> 😕
Using slots doesn't solve my case.

In my case, fix was to change useFetch(...) in one my component to $fetch(...) on api call.

My original code was:

const { page } = useContent();
const { data } = await useFetch(`/api/meta?path=${page.value._path}`);

Updated code:

const { page } = useContent();
const data = await $fetch(`/api/meta?path=${page.value._path}`);

...and yep, It looks, like it's a Nuxt-Content bug.

[elmir-mammadli]

I have the same issue, but only if the page was directly requested from the server. Somehow by using LazyContentDoc instead of ContentDoc i was able to fix this issue at the moment.

Yup! It helped! Thanks!

[mewforest]

Yup! It helped! Thanks!

But in SSG mode LazyContentDoc doesn't work again.

[micdobro]

Still happening. What is really scary is that in dev mode everything works super dandy. Things fall apart after deployment.

[torce]

Same issue. Everything working in dev mode, but after nuxt generate and deploy client side navigation breaks.

I was using both <ContentDoc> and <MDC> components in the same page to render the main MD content and some document fields that are also in MD format.

Removing the <MDC> components and using only <ContentcDoc> seems to fix this issue for me.

Things that I have tried without results:

• <LazyContentDoc>
• Using a slot explicitly:

  <ContentDoc :path="contentPath">
   <template v-slot="{ doc }">
     <article>
       <h1>{{ doc.title }}</h1>
       <ContentRenderer :value="doc" />
     </article>
   </template>
  </ContentDoc>
  
• Replacing <NuxtLink> with regular links <a>. Not sure why, but with this change the pages are still broken after reloading, not only with client side navigation.

[GuillaumeDgr]

Hi, I have exactly the same issue in prod (dev works perfectly) :S
Any update on this pls?
Thanks a lot for your help!

[rahulkumarsingh73690]

+1 Same issue

[posva]

I'm seeing the same issue with

<ContentQuery path="/open-source/_intro" find="one" v-slot="{ data }">
  <ContentRenderer :value="data">
    <ContentRendererMarkdown :value="data" />
  </ContentRenderer>
</ContentQuery>

or

<ContentQuery path="/open-source/_intro" find="one" v-slot="{ data }">
  <ContentRenderer :value="data"></ContentRenderer>
</ContentQuery>

in prod only after nuxt generate. Everything works in dev mode.

All queries return a 404, e.g. /api/_content/query/0XF0tlkC88.1721293108801.json?_params={%22first%22:true,%22where%22:[{%22_path%22:%22/open-source/_for-individuals%22}],%22sort%22:[{%22_stem%22:1,%22$numeric%22:true}]}. When I check the generated content, it only contains one file:

.output/public/api
└── _content
    └── cache.1721293108801.json

2 directories, 1 file

This was working before. This update seems to break: posva/esm.dev@a3732d6. Using nuxt 3.12.2 works (generates all the needed files in /api/_content), so maybe this is an issue in Nuxt? cc @danielroe

[danielroe]

@posva If it's what I think it should be resolved in next Nuxt patch and you can workaround by adding / to nitro.prerender.routes.

[posva]

Indeed! That worked!

[GuillaumeDgr]

Hi, I can't get it to work although I updated the nuxt version (3.12.4) and added the "/" in nitro.prerender.routes.
Thks for your help

[danielroe]

@GuillaumeDgr Can you provide a reproduction? 🙏

[FabianRzepka]

After updating nuxt and nuxt-content, an error appeared only after rendering nuxi generate in dev everything works.
Previously, there was no such bug.

Nagrywanie.2024-09-26.213022.mp4

Component in index page.
There is a problem on these two components <ContentList> and <ContentQuery>.

      <ContentQuery path="/solutions">
        <template #default="{ data }">
          <UiCard v-for="article in data" :key="article._path">
            <template #link>
              <NuxtLink
                class="absolute top-0 bottom-0 left-0 right-0"
                :to="article._path"
              >
              </NuxtLink>
            </template>
            <img
              class="m-auto rounded-[0.6rem]"
              :src="article.image"
              :alt="article.title"
            />
            <div class="w-full mt-2 font-semibold text-center">
              {{ article.title }}
            </div>
          </UiCard>
        </template>
        <template #not-found>
          <p>Nie znaleziono.</p>
        </template>
      </ContentQuery>

[ghost]

@atinux @danielroe

BTW:
The problem still exists. Any idea? Prerender routes?
It wouldn't be nice, if the user get an error during I update and deploy.

https://danielhill.nuxt.space/

My Reproduction

My nuxt content website is opened in a browser. I add a mark down file and wait until the deployment process is complete. The website is still open in the browser.

After the deployment is complete and I navigate to another page on the still opened website, the content of the article is no longer displayed with the note: "...use slots...".

However, if I refresh the website using the browser button, the articles are displayed again and everything works normally.

[sooooooooooooooooootheby]

It seems to be related to Nginx, and when I access it through a domain name, I get "You should use slots with ", and the console shows a 502 Bad Gateway error.

However, there is no problem if I access it through an IP address.

My configuration on Nginx is to access through a proxy.

[sooooooooooooooooootheby]

I fixed the "You should use slots with " issue according to the Nginx document for nuxt2, but it has caused page jumping and longer loading times.

https://v2.nuxt.com/deployments/nginx/

The ones above are accessed via IP addresses, while the ones below are accessed via domain names (using Nginx).

[sooooooooooooooooootheby]

Can't we change that behavior for all connections?我们不能改变所有连接的行为吗？

What do you mean by "all connections"?

[sooooooooooooooooootheby]

Greetings @ soooootheby

(I mean the different options like proxy, ip, domain name, etc.) (I mean different options like proxy, IP, domain name, etc.)

I think I have to keep it to a minimum of update and deploy steps. But I wanted to publish a new article every day... But I want to publish a new article every day...

(: -- I wish I could understand Chinese. I really like rice and Asian spices. I like rice and Asian spices.

Thanks very much! Thank you very much!

I think what you mean is to ensure that each update reduces the number of steps required to upload updates,

Maybe you could try vercel? When you need to upload a new article, simply create a new article within your project and write it. Then, push it directly to GitHub, and Vercel will take care of the rest.

[sooooooooooooooooootheby]

Something like this, yes.

Vercel is different to GitHub Pages, that's a good idea. But I will losing my domain:

https://danielhill.nuxt.space/

Because I deploy it with Nuxt Studio (GitHub Pages). Vercel is definitely worth a try. I have also deployed other websites on vercel. But I haven't tested it yet.

Thank you for thinking about this for me. Have a pleasure full day. Or are you know how I can keep my domain anyway?.

You should buy a domain name that belongs to you.

I recommend https://porkbun.com/

You can purchase the right to use a domain name for one year for just a little bit of money.

[sooooooooooooooooootheby]

Unfortunately, I decided not to invest any money without having a stable income. I have been doing web design since 1999.

I was previously at:

https://hostinger.com

I don't know what to do now.....

If you want, you can take a look at my github profile: @aidedee . Maybe then you can think of a domain name for me? Maybe I'll buy a new one then.

(: --

I don't think that should be discussed in this issue. But it doesn't cost much to buy a domain name, it only costs a few dollars to buy a domain name (e.g..xyz,.app,.top), if you don't have the money or can't afford to spend it, my advice is to find a stable job with a stable income before you consider it.

[ghost]

I deployed my website with vercel instead of the traditional method.

It works great. The problem was solved for me.

[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.

[tkgregory]

I have this similar issue.

• I use <ContentDoc> within a component to render Markdown
• later my component also calls queryContent to get YML data

When I load the page, rendered Markdown flashes briefly,, then is replaced with You should use slots with <ContentQuery>!

[gdebrion]

Hello,

I had this bug and I found a solution: I removed ContentQuery component and made the request with useAsyncData.

Before

<script setup lang="ts">
    const { locale, locales } = useI18n();
</script>

<template>
    <nav>
        <ul id="main-menu" :class="{'open': open}">
            <li><NuxtLinkLocale to="/">{{ $t('navigation.home') }}</NuxtLinkLocale></li>
            <li>
                <NuxtLinkLocale to="/chambres">{{ $t('navigation.rooms') }}</NuxtLinkLocale>

                <ContentQuery path="/rooms" :locale="locale" :only="['title', '_path', 'url']">
                    <template #default="{ data }">
                        <ul>
                            <li v-for="room in data" :key="room._path">
                                <NuxtLinkLocale :to="room.url">{{ room.title }}</NuxtLinkLocale>
                            </li>
                        </ul>
                    </template>
                </ContentQuery>
            </li>

            <li><NuxtLinkLocale to="/spa">{{ $t('navigation.spa') }}</NuxtLinkLocale></li>
            <li><NuxtLinkLocale to="/contact">{{ $t('navigation.contact') }}</NuxtLinkLocale></li>

            <li class="lang">
                <SwitchLocalePathLink v-for="lang in locales" :key="lang.code" :locale="lang.code">
                    {{ lang.code }}
                </SwitchLocalePathLink>
            </li>
        </ul>
    </nav>
</template>

After

<script setup lang="ts">
    const { locale, locales } = useI18n();

    const { data: rooms } = await useAsyncData('nav-rooms', () => {
        return queryContent('/rooms')
            .only(['title', '_path', 'url'])
            .where({ _locale: locale.value })
            .find();
    });
</script>

<template>
    <nav>
        <ul id="main-menu" :class="{'open': open}">
            <li><NuxtLinkLocale to="/">{{ $t('navigation.home') }}</NuxtLinkLocale></li>
            <li>
                <NuxtLinkLocale to="/chambres">{{ $t('navigation.rooms') }}</NuxtLinkLocale>

                <ul>
                    <li v-for="room in rooms" :key="room._path">
                        <NuxtLinkLocale :to="room.url">{{ room.title }}</NuxtLinkLocale>
                    </li>
                </ul>
            </li>

            <li><NuxtLinkLocale to="/spa">{{ $t('navigation.spa') }}</NuxtLinkLocale></li>
            <li><NuxtLinkLocale to="/contact">{{ $t('navigation.contact') }}</NuxtLinkLocale></li>

            <li class="lang">
                <SwitchLocalePathLink v-for="lang in locales" :key="lang.code" :locale="lang.code">
                    {{ lang.code }}
                </SwitchLocalePathLink>
            </li>
        </ul>
    </nav>
</template>

I think the bug occurs when you have a page with the same query inside ContentQuery several times. With useAsyncData we can specify a different key to avoid collisions. In my case I just edited my Navigation.vue component, below on the page I have still one ContentQuery that lists my rooms with success.

• nuxt@3.16.2
• @nuxt/content@2.13.4