Reading nested directory with ContentNavigation component nuxt3

Question

My content folder has one directory called planets, which contains yaml files of different planets.

I want to render the planet pages as navigation items content navigation component

Currently i only get a link to the /planets page, so Im figuring that the component is reading the root content directory but I need to give it the /planets to read that instead.

In my index.vue file I have written this as per docs:

  <nav>
    <ContentNavigation v-slot="{ navigation }" :query="queryPlanets" >
      <div v-for="link of navigation" :key="link._path">
        <NuxtLink :to="link._path">{{ link.title }}</NuxtLink>
      </div>
    </ContentNavigation>
  </nav>

  <script setup>

     const queryPlanets = queryContent('planets')

  </script>

But I keep getting this vue router warn error:

[Vue Router warn]: No match found for location with path "/planets"

I have tried using the following:

const query = queryContent({
    where: {
      _path: { $contains: '/planets' }
    }
  })

Gives same error,

I have also tried to track the files down manually

 const query = await useAsyncData('planets', () => queryContent('/planets').find('/'));

And I do find the files with the right paths and all the values.

So I believe this is some sort of vue router error, but I am unsure how to debug this exactly.

I am using Nuxt3

EricTalv · Accepted Answer · 2022-10-01 10:19:21Z

1

Turns out when calling <ContentNavigation v-slot="{ navigation }" > you get everything including contents of nested directories.

So the navigation returns an object and then I can just write them out as follows:

<div v-for="dir in navigation" :key="dir._path" >
  <div v-for="link in dir.children" :key="link._path">
    <NuxtLink :to="link._path">
      {{ link.title }}
    </NuxtLink>
 </div>
</div>

answered Oct 1, 2022 at 10:19

EricTalv

1,0592 gold badges17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Reading nested directory with ContentNavigation component nuxt3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related