I didn’t like having to manually specify my sidebar items when creating a vuepress site. To me, it ruined the purpose of a light-weight no-code wiki-site.
To solve this I created a small node.js script to read my docs folder and map out the sidebar items. The first iteration was to simply call a function:
/* config.js */
const sidebar = require('vuepress-auto-sidebar')
module.exports = {
themeConfig: {
"base": "/base/path/",
"sidebar": sidebar.getSidebar(),
}
}
This worked well but what if you wanted additional configuration? Doing it this way there’s only ever going to be a one-size-fits-all or doing an absurd amount of pre-configuring or even passing parameters to the function itself.
The better solution was to actually generate the code and mutate config.js so it can be changed after the fact. This was done by making it a node CLI script instead.
It basically works the same. Except it also locates the config.js, requires it in the script, modifies the ”sidebar” property, stringifies the object and then rewrites the config.js.
Running vuepress-auto-sidebar in the same folder as .vuepress, would result in something like this:
/* config.js */
module.exports = {
themeConfig: {
"base": "/base/path/",
"sidebar": [
{
"title": "Home",
"path": "/base/path/",
"collapsable": true,
"children": []
},
{
"title": "ProjectA",
"path": "/base/path/ProjectA/",
"collapsable": true,
"children": []
},
{
"title": "ProjectB",
"path": "/base/path/ProjectB/",
"collapsable": true,
"children": []
}
]
}
}
We can now fully customize the sidebar to our liking!
If you find this useful, you can check it out on github or npm.
