Is there a way to render the navigation on the client side?

[StreakingMan]

This is my scenario:

I have multiple component libraries, and I want the documentation of these component libraries to be aggregated into the same site.

My current approach is to set different base paths for the documentation of each component library and deploy them to the same domain name, But the navigation configuration of these component libraries is the same, which makes these documents look like they belong to the same site.

But when the navigation configuration is updated, I need to update the navigation configuration of each component library document, which is very troublesome.

Is there a way to render the navigation on the client side? In this way, I can provide the navigation configuration through the interface, so I can only update one place.

Or is there any other solution? Monorepo is a good way, but due to historical reasons, I can't use monorepo to manage these component libraries.

Thanks!

[MarkusKeck]

I think this could be related #1008

[StreakingMan]

Because of reacently updates, vitepress is able to custom theme, so my problem has been solved, just override Internal componentsVPNavbarMenu.vue

<script lang="ts" setup>
import { useData } from '../composables/data'
import VPNavBarMenuLink from './VPNavBarMenuLink.vue'
import VPNavBarMenuGroup from './VPNavBarMenuGroup.vue'

// before
// const { theme } = useData()

// after
const nav = ref([])

onMounted(async () => {
    nav.value = await (await fetch('/path/to/my/nav-config.json')).json()
})
</script>

<template>
  <!-- change theme.nav to nav -->
  <nav v-if="nav" aria-labelledby="main-nav-aria-label" class="VPNavBarMenu">
    <span id="main-nav-aria-label" class="visually-hidden">Main Navigation</span>
    <template v-for="item in nav" :key="item.text">
      <VPNavBarMenuLink v-if="'link' in item" :item="item" />
      <VPNavBarMenuGroup v-else :item="item" />
    </template>
  </nav>
</template>

<style scoped>
.VPNavBarMenu {
  display: none;
}

@media (min-width: 768px) {
  .VPNavBarMenu {
    display: flex;
  }
}
</style>

and then config the vite alias

and then just change the json file on your server, the nav will update😄