Content rendered out of order

[davestewart]

Environment

• Operating System: Darwin
• Node Version: v16.17.1
• Nuxt Version: 3.3.2
• Nitro Version: 2.3.2
• Package Manager: npm@8.15.0
• Builder: vite
• User Config: app, modules, content, content-assets
• Runtime Modules: ../src/module (nuxt-content-assets), @nuxt/content@2.5.2
• Build Modules: -

Reproduction

https://github.com/davestewart/nuxt-content-assets/tree/main/demo

Describe the bug

When running the dev server, and returning to pages, page elements will render out of order.

This is how the main index page of the demo looks:

And this is the same page after navigating away, then coming back – note the out of order bullets in the main page:

Additional context

I've also seen the same and worse on my other WIP Nuxt 3 / Content site; it's as if Vue is trying to optimise the render or something, perhaps getting the keys wrong, you can just see the various sections of the content being wrongly redrawn when you hit the page.

Logs

No response

[davestewart]

Additionally, on another project.

Initial page load – this is how it's supposed to look:

Navigate away then back – note the list at the bottom of the page has been replaced by other elements:

These elements are actually from the bottom of the same page, but note in the image above, how even they are out of order!

[toniengelhardt]

Notice similar things with SSR, order changes and creates hydration mismatches.

[davestewart]

Adding :key="$route.path" to <ContentRenderer /> seemed to fix it for me, at the expense of what seems like a small delay in rendering.

[soga-software]

Please set the number of the folder and the markdown file I used to have the same problem, I refer to the documentation here: https://content.nuxtjs.org/guide/writing/content-directory#ordering When using, no need to care about the sequence number Hope it helps you

[lexxrex]

If it any help, I struggled with a similar issue and resolved it by adding a leading zero to the file name for files 1-9.

01.filename.md
02.filename.md
...

[davestewart]

⚠️ For those who are thinking this issue is about file ordering; it's not.

It's about the elements on the page.

I've clarified the issue text; hopefully that helps!

Thanks 😊

[nobkd]

(@lexxrex) ⚠️ For those who have an issue with ordering by file number prefix:

Your issues sound like the ordering is by string and not numeric. See $numeric operator:

• https://content.nuxt.com/composables/query-content#sortoptions

• 1859

If you still experience issues with that, it would be nice if you could open a new issue. Thank you :)

[davestewart]

🤔 Regards file ordering...

FWIW various OSs and apps order files correctly by number (Mac, Source Tree, etc):

Not sure if glob orders correctly, but there are libs which will reorder:

• https://www.npmjs.com/package/natural-orderby

Might be worth a PR.

[bloor]

Having same issue, BUT weirdly only on production (netlify). Probably it occurs due to processing speed of the local/prod machines. After first render the "footer" ends being rendered above the "content" element.

After I upgraded nuxt from3.5.1 to 3.11.2

From what I've tested is because of the v-if directive inside the content block:

So i added :key="1" and :key="2" on the 2 sub-blocks and WORKS.