How to modify sidebar in hooks？

[shanyuhai123]

I wrote a plugin that automatically generates sidebars. I hope users use the plugin to introduce the plugin and start writing posts without caring about how to introduce the sidebar.

我写了个自动生成侧边栏的插件，希望使用该插件的用户引入插件后就可以开始写文章了，而不需要关心如何引入侧边栏。

---

In VuePress v1, i can do this:

在 VuePress v1 中，我可以这样修改 sidebar

const sidebarPlugin = (options, ctx) => {
  let sidebar = {}

  return {
    name: 'vuepress-plugin-auto-sidebar',
    ready() {
      // change sidebar
      sidebar = {}
    },
    enhanceAppFiles () {
      return {
        name: 'auto-sidebar-enhance',
        content: `export default ({ siteData }) => { siteData.themeConfig.sidebar = ${JSON.stringify(sidebar)} }`
      }
    },
  }
}

In VuePress v2, clientAppEnhanceFiles do not have siteData parameter, and i tried modify app.options.themeConfig.sidebar in onPrepared hook, it also does not work.

在 VuePress v2 中，clientAppEnhanceFiles 中已经没有 siteData 参数可供修改了，我又尝试了在 onPrepared 直接对 app.options.themeConfig.sidebar 进行修改，它同样没有生效。

[meteorlxy]

In onInitialized hook

Theme is loaded before initialization, so you can't modify theme config in plugin hooks.

In fact, it makes no sence to make a plugin only for the default theme. A plugin should provide its own functionality, no matter what theme the user is using

[shanyuhai123]

I tried, but not work.

onInitialized (App: any) {
  const sidebarData = {
    '/menu1/menu1-1/': [
      {
        text: 'Menu1 1',
        title: 'Menu1 1',
        collapsable: true,
        sidebarDepth: 1,
        children: [
          'Readme.md',
          'File1-1-1.md',
          'File1-1-3.md',
          'File1-1-2.md'
        ]
      }
    ]
  }

  App.options.themeConfig.sidebar = sidebarData
  console.log(App.options)
}

Here are logs and empty sidebar:

[meteorlxy]

Ah my fault. Theme has already been loaded in onInitialized hook

[meteorlxy]

I've updated my original answer

[shanyuhai123]

Oh, thanks.
There are a lot of people who like the simplicity of the default theme, so it's valuable to serve only that segment of the population.
Of course, other themes tend to have their own design philosophy and the sidebar may not be very important to them.

[Mister-Hope]

Besides the original answer, you can try to make a helper function instead of a plugin.

import { defineUserConfig } from '@vuepress/cli'
import { sidebarHelper } from 'your package'

export default defineUserConfig(sidebarHelper({
  // user config
}});

[shanyuhai123]

thanks, i will try 👍

[Mister-Hope]

btw, my theme already support it without a helper function, you may have a look at my achievement, Hope it helps