How to get a list of all pages (title, path, children)

[robertraaijmakers]

Hi there,

I try to migrate a vuepress v1 site to the new structure. I wrote a custom component there that automatically generated a menu structure of multiple (sub)pages in the sidebar. This was done with the use of the 'pages' variable available through 'site' (see snippet below).

export function resolveCustomSidebarItems (page, regularPath, site, localePath) {
const { pages, themeConfig } = site

Currently I'm migrating to the v2. There we have the "useSidebarItems". I have overwritten this file by using the new alias feature as follows:

alias: {
    '@theme/useSidebarItems': path.resolve(
      __dirname,
      './composables/useSidebarItems.js',
    ),
  },

So far so good :)

Now I want to access the App.pages variable from there, so that I can render the right parent/child page urls dynamically based on the pages available. But I don't know how the App.pages can be made available there. I have found a couple of threads (#380, #72). But the "usePagesData" doesn't seem to be available (anymore)?

Any other good suggestions are more then welcome. The main goal is to fill the "sidebar" variable (defined in config.ts) dynamically based on the pages available.

To give an idea of what I want to achieve, the (partial) old sidebar config looked as follows:

sidebar: {
      "/SomePlatform/": [
        {
          title: "Some Platform",
          children: [
            {
              title: "Some-topic-write",
              path: "Some-topic-write/",
              collapsible: true,
              children: { rendering: "auto", maxDepth: 3, sortType: "title" },
            },
            {
              title: "Other Topic",
              path: "OtherTopic/",
              collapsible: true,
              children: { rendering: "auto", maxDepth: 3, sortType: "title" },
            },
            {
              title: "Some Other File",
              path: "some-other-file.md"
            },
          ],
        },
      ],
      "/SomePath/ToSomething/Global/": [
        {
          title: "Data",
          children: { rendering: "auto", maxDepth: 3, firstPath: "", sortType: "order", },
        },
      ],
      "/SomeProduct/Foundation/": [
        {
          title: "Topic 1",
          children: { rendering: "auto", maxDepth: 4, firstPath: "Topic1/", sortType: "order", },
        },
        {
          title: "Topic 2",
          children: { rendering: "auto", maxDepth: 4, firstPath: "Topic2/", sortType: "order", },
        },
      ],
      "/SomeProduct/Workloads/": [
        {
          title: "Topic 1",
          children: { rendering: "auto", maxDepth: 3, firstPath: "Topic1", sortType: "title", },
        },
        {
          title: "Topic 2",
          children: { rendering: "auto", maxDepth: 3, firstPath: "Topic2", sortType: "title", },
        },
        {
          title: "Topic 3",
          children: { rendering: "auto", maxDepth: 3, firstPath: "Topic3", sortType: "title", },
        },
      ],
      "/SomethingElse/": [
        {
          title: "Something Else",
          children: [
            {
              title: "Something",
              path: "/SomethingElse/Folder2/FolderMore/",
              collapsible: true,
              children: { rendering: "auto", maxDepth: 5, sortType: "title" },
            },
          ],
        },
      ],
      "/SomethingNew/": [
        {
          title: "Something New",
          children: { rendering: "auto", maxDepth: 2, firstPath: "", sortType: "title", },
        },
      ],

What it then did was displaying on the "/SomethingNew/" (and all subpages) the menu structure of the page "SomethingNew" and all child pages up to a depth of 2 folders deep.

When on "/SomethingElse/" (or any subpage) it displayed the "SomethingElse" structure with "Something Else" and then all children from "/SomethingElse/Folder2/FolderMore/" up to 5 folder levels deep.

Basically what I need is a point in the vuepress application (let it be a plugin or some lower level script) where I can have access to the theme.sidebar variable and the app.pages variable and where I then can ideally modify either the sidebar layout or overwrite the theme.sidebar variable :)

[Mister-Hope]

Try to see how theme hope achieves structure sidebar

[robertraaijmakers]

Thanks, that is mostly what I was looking for! 👍