Nuxt•3mo ago

Nuxt Content - Navigation not rendered properly to generated static site

I have a few pages in the /content tree

/content/index.md
/content/folder1/index.md
/content/folder1/other.md

/content/index.md
/content/folder1/index.md
/content/folder1/other.md

I marked the index.md pages wit

navigation:
  title: Home | folder 1

navigation:
  title: Home | folder 1

And the following code in my app.vue

```
When I run in dev mode all gets nicely rendered into a menu `Home    folder 1`. 

However when I generate and serve with a webserver the menue ignores my CSS and renders as a tree

```
When I run in dev mode all gets nicely rendered into a menu `Home    folder 1`. 

However when I generate and serve with a webserver the menue ignores my CSS and renders as a tree

-- Home +-- Home +- folder 1 +-- folder 1 +-- other ``` Why the difference? Is there any setting I'm missing?

5 Replies

Dull Object SpecialistOP•3mo ago

Here is my code

        <ul class="navbar-nav ms-auto">
          <ContentNavigation v-slot="{ navigation }">
            <li v-for="link of navigation" :key="link._path" class="nav-item">
              <NuxtLink :key="link._path" :to="link._path" class="nav-link click-scroll" activeClass="active">
                {{ link.title }}
              </NuxtLink>
            </li>
          </ContentNavigation>
        </ul>

        <ul class="navbar-nav ms-auto">
          <ContentNavigation v-slot="{ navigation }">
            <li v-for="link of navigation" :key="link._path" class="nav-item">
              <NuxtLink :key="link._path" :to="link._path" class="nav-link click-scroll" activeClass="active">
                {{ link.title }}
              </NuxtLink>
            </li>
          </ContentNavigation>
        </ul>

and I'm getting the hydration warnings

[Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead. 
  at <RouterLink ref=fn to="/" activeClass=undefined  ... > 
  at <NuxtLink to="/" > 
  at <ContentNavigation> 
  at <App key=4 > 
  at <NuxtRoot>

[Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead. 
  at <RouterLink ref=fn to="/" activeClass=undefined  ... > 
  at <NuxtLink to="/" > 
  at <ContentNavigation> 
  at <App key=4 > 
  at <NuxtRoot>

harlan•2mo ago

hm strange, maybe worth re-implementing yourself so you can debug it easier https://github.com/nuxt/content/blob/main/src/runtime/components/ContentNavigation.vue

GitHub

content/src/runtime/components/ContentNavigation.vue at main · nuxt...

The file-based CMS for your Nuxt application, powered by Markdown and Vue components. - nuxt/content

Dull Object SpecialistOP•2mo ago

Thanks Harlan, you mean to copy the code of the component under a different name and then try to debug the component? Not sure if I'm qualified for that. The effect is really strange, I may record (after dinner) a short video to demonstrate the effect.

Dull Object SpecialistOP•2mo ago

@harlan Here is a recording against npm nuxi dev https://www.loom.com/share/e51567716fdd400c8fb1ada9f362faa5?sid=3b936a88-9ea7-4467-b24f-b9b8c45162e3

Loom

Nuxt 3 Nuxt Content Website Overview 🌟

Hey there! In this video, I showcase the Nuxt 3 Nuxt content website and demonstrate the expected results after a full refresh. I highlight the delay in rendering the website and the impact of JavaScript on the menu functionality. No specific action is requested from you, just a heads-up on these key points.

Dull Object SpecialistOP•2mo ago

^^^ Woooa, they seem to apply some AI to the text I spoke on the video. Descent summary though.

Gaming

Programming

Nuxt Content - Navigation not rendered properly to generated static site