Route navigation with NuxtLink only visible after page is refreshed

[Mokkapps]

Environment

❯ npx nuxi info Nuxt CLI v3.0.0-rc.3 08:12:45 RootDir: /home/projects/nuxt-content-v2-blog-demo 08:12:47 Nuxt project info: 08:12:47

---

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.3
• Package Manager: [email protected]
• Builder: vite
• User Config: modules, components
• Runtime Modules: @nuxt/[email protected]
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/nuxt-content-v2-blog-demo

Describe the bug

Current Behavior

1. Navigate to "/blog" -> Content for page is visible ✅
2. Navigate to "/home" or click on any blog post link on this page -> Empty NuxtPage body ❌

Console sometimes show an error, see "Logs" below.

If I refresh the empty page, the content body is shown correctly

Expected Behavior

Page content is visible without refreshing the page

Additional context

No response

Logs

vue.js?v=5d99fb64:7198 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insert (https://nuxt-content-v2-blog-demo--3000.local.webcontainer.io/_nuxt/node_modules/.vite/deps/vue.js?v=5d99fb64:7198:12)
    at move (https://nuxt-content-v2-blog-demo--3000.local.webcontainer.io/_nuxt/node_modules/.vite/deps/vue.js?v=5d99fb64:5821:7)
    at move (https://nuxt-content-v2-blog-demo--3000.local.webcontainer.io/_nuxt/node_modules/.vite/deps/vue.js?v=5d99fb64:5809:7)
    at move (https://nuxt-content-v2-blog-demo--3000.local.webcontainer.io/_nuxt/node_modules/.vite/deps/vue.js?v=5d99fb64:5809:7)
    at move (https://nuxt-content-v2-blog-demo--3000.local.webcontainer.io/_nuxt/node_modules/.vite/deps/vue.js?v=5d99fb64:5809:7)
    at Object.activeBranch.transition.afterLeave (https://nuxt-content-v2-blog-demo--3000.local.webcontainer.io/_nuxt/node_modules/.vite/deps/vue.js?v=5d99fb64:2303:15)
    at performRemove (https://nuxt-content-v2-blog-demo--3000.local.webcontainer.io/_nuxt/node_modules/.vite/deps/vue.js?v=5d99fb64:5923:20)
    at el._leaveCb (https://nuxt-content-v2-blog-demo--3000.local.webcontainer.io/_nuxt/node_modules/.vite/deps/vue.js?v=5d99fb64:2917:9)
    at finishLeave (https://nuxt-content-v2-blog-demo--3000.local.webcontainer.io/_nuxt/node_modules/.vite/deps/vue.js?v=5d99fb64:7828:13)
    at resolve2 (https://nuxt-content-v2-blog-demo--3000.local.webcontainer.io/_nuxt/node_modules/.vite/deps/vue.js?v=5d99fb64:7859:30)

[harlan-zw]

Not exactly sure what's going on but I think it may be related to how nuxt does the transitions between pages.

If you wrap the ContentDoc in a div it seems to fix it.

See here: https://stackblitz.com/edit/nuxt-content-v2-blog-demo-npjmnv?file=pages/blog/[...slug].vue

[Mokkapps]

Not exactly sure what's going on but I think it may be related to how nuxt does the transitions between pages.

If you wrap the ContentDoc in a div it seems to fix it.

See here: https://stackblitz.com/edit/nuxt-content-v2-blog-demo-npjmnv?file=pages/blog/[...slug].vue

Thanks, that works like a charm!

[Rigo-m]

Each page, by documentation, in nuxt, has to contain only a single root element. Pages must have a single root element to allow route transitions between pages. (HTML comments are considered elements as well.)

[d2FuZ3h1ZG9uZw]

All the above methods do not work for me.

[harlan-zw]

All the above methods do not work for me.

If you provide a reproduction on stackblitz, I'll look into it

[dhallX]

Im having a similar issue. is there any update to this?

[dhallX]

Not exactly sure what's going on but I think it may be related to how nuxt does the transitions between pages.

If you wrap the ContentDoc in a div it seems to fix it.

See here: https://stackblitz.com/edit/nuxt-content-v2-blog-demo-npjmnv?file=pages/blog/[...slug].vue

Just out of curiosity. What if you don't have a need for this plugin. How I understand the Content Doc component is to render markdown file etc. I have the same issue but render basic Vue components... Nothing special

[ddahan]

Each page, by documentation, in nuxt, has to contain only a single root element.

This is what caused the issue for me, using pageTransition feature in the meantime. If you have a similar issue with Nuxt Content:

• If you want to use page transitions, ensure all your pages have a single node
• Or remove page transitions.