[Feature request] Allow to programmatically modify the navbar

[Radiergummi]

Clear and concise description of the problem

I'm working on a plugin to load pages from Notion dynamically during build. Those pages will be fetched and placed as markdown files in the sources directory. Obviously, it would be great to add those pages to the navigation bar, but that doesn't seem possible right now: There is no way to modify the theme configuration.

How is the app.addPage method intended to be used if there's no way to add the page to the navigation?

Suggested solution

It would be good to have a way to push entries onto the navbar items defined in the theme config; this will be a must-have feature for any kind of CMS integration via plugins.

Alternative

I'm currently considering to separate out the content fetching into a separate script that fetches pages, modifies the config file, and only invoke the VuePress build when that's done, but that's a horrible and brittle workaround.

Additional context

No response

[Radiergummi]

For anyone else struggling with this, I found a workaround, namely creating a custom theme that inherits from the default theme and modifies the theme config. As top-level await is available in more recent versions, you can await the theme module:

export default defineUserConfig( {
  // ...

  theme: await childTheme( {
    // Pass theme config and your own options
  } ),
} );

In the child theme module, you can do whatever async work you need, then patch the navbar config, and return it:

export const childTheme = async ( options: ThemeOptions ): Promise<Theme> => {
  // ...

  const { pages } = await renderer.render( options.notion );
  const additionalItems: NavbarConfig = inferNavigationItems( pages );

  options.navbar = patchNavbarConfig( options, additionalItems );

  return {
    name: 'child-theme',
    extends: defaultTheme( options ),
    // ...
  }
} );

It shouldn't be that hard, though.

[Mister-Hope]

Hi, I converted this issue to a discussion, as I don't think this should be a feature request.

The navbar should be constant in most situations, and this fits our design goal.

If you want a dynamic navbar, you may want something below, a "Second level navbar", which you can customize your layout and built it yourslef.

https://nuxt.com/docs/getting-started/introduction

[Radiergummi]

I actually need a constant navbar. It's just that I need to add some files that are added during the build, and I don't know them individually beforehand.
My use case is having part of the site content in an external CMS system, in this case Notion - but really this could be any other CMS, e.g. WordPress, or Netlify, etc.
This part of the site content, that is, additional pages, should be fetched from the CMS during the site build, and integrated into the existing content. It won't be fetched on the client side, everything about this issue concerns build-time only, so a dynamic navbar would be the wrong solution.

Think of it this way: We have the prose content of our API documentation as static markdown pages in the docs repository. But additionally, we have an API reference detailing the endpoints and their parameters, which is dynamically generated from our application source code. Now, we'd like to include all API resources available in the VuePress site, and because we have a lot of them, each should occupy their own page. To make that content accessible, we'd like to have a navbar group named "API Reference", which contains all resource pages.

To make that work, I need two things: A way to load external content while the site is being built, and a way to add that newly-fetched content to the navbar without having to do it manually.

Additionally, how is the createPage utility intended to be used if you are simultaneously prevented from adding navigation items? The use case shown in the docs is adding a dynamically generated home page, but this omission limits the utility to just that! Wouldn't it be desirable for plugins or themes to extend the content and navigation dynamically?

[Radiergummi]

@Mister-Hope could you let me know what you think of the points addressed in my previous comment? I'm curious of your opinion on VuePress and external content.

[Mister-Hope]

I think this should be simple, as you just need to fetch all the page in vuepress config file first (top-level await is supported), and then generate the data into a navbar config and pass it to default theme below, and use onInitialized lifecyle to add those pages.

// .vuepress/config.ts
import { createPage } from '@vuepress/core'
import { defineUserConfig, defaultTheme } from 'vuepress';

// this is a function you get your pages
const pageDatas = await fetchPages()

// a function generating navbar config from datas
const navbarConfig= getNavbarConfig(pageDatas)

// get pageOptions of createPage function
const pageOptions = pageDatas.map(data=>getPageOption(data));

export default defineUserConfig({
  // ...
 theme: defaultTheme({
   navbar: navbarConfig
   // ...
 }),

 onInitialized: async (app) => {
   await Promise.all(pageOptions.map(async (option)=> {
      app.pages.push(await createPage(app, pageOptions))
   });
 }
})

The idea is just getting all data before starting vuepress.