Defined sidebar with auto fallback

[mrleblanc101]

Feature request

Hi,
I was using sidebar: 'auto' until now.
For a specific page, I want to override the sidebar.
I thought I could so this with the in YAML config of that specific page but after looking at the docs, it looks like I need to do this in the theme config.
So I added my sidebar, but it remove the automatic sidebar from every other page !
By looking at the example for the default theme config (https://vuepress.vuejs.org/theme/default-theme-config.html#sidebar), I see there is a fallback option.
If I use the fallback options with auto, the whole site does not load but there is no error while generating.

        sidebar: {
            '/documentation/vue/': [
                '',
                'why-vue',
                'plugins',
            ],
        
            // fallback
            '/': 'auto',
        },

The only possible way to bypass this that works would be to not provide a fallback and add a YAML config for EVERY page with

---
sidebar: auto
---

What problem does this feature solve?

Allow to have an auto sidebar for everypage expect a few specific pages.

What does the proposed API look like?

A) Allow overriding an auto sidebar in the YAML of the page
B) Allowing auto option on sidebar fallback in config.json

How should this be implemented in your opinion?

Option B

Are you willing to work on this yourself?**

[ulivz]

// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: 'auto'
  }
}

Ref: https://vuepress.vuejs.org/theme/default-theme-config.html#auto-sidebar-for-single-pages

[mrleblanc101]

Yes... that's not the issue.
If I want a specific page to have a specific sidebar, I cannot use auto in conjunction unlesss I specify sidebar: auto in the YAML frontmatter of every other page. I cannot define the sidebar in config.json for a specific page and have auto as a fallback like in this example https://vuepress.vuejs.org/theme/default-theme-config.html#multiple-sidebars

[haltcase]

@ulivz please reopen or clarify. It doesn't seem to be possible to use sidebar: 'auto' as a fallback. Docs compile with no errors but any routes covered by the fallback won't load and will show this error in the dev console:

TypeError: config.map is not a function
    at resolveSidebarItems
    ...

So in the case of routed sidebars, the values are always assumed to be an array. We shouldn't be required to specify sidebar: auto on every individual page just because we want to override a specific page's sidebar, so this should be supported.

[ulivz]

I carefully read your issue again, so what you want is that when you set sidebar as a object at site config, you still want to have the ability to fallback all other pages to 'auto' so that you don't need to duplicate at rest non-matched pages, is it right?

[haltcase]

@ulivz you've got it. I agree with @mrleblanc101's two options in the OP. Let's say I have a /guide/ route and I want to override all of its pages' sidebars while leaving every other route in the site with an 'auto' sidebar.

A) Allow overriding an auto sidebar in the YAML of the page

With this option I'd set sidebar: 'auto' in my config.js, but put frontmatter overrides into the pages that need to be overridden. This probably isn't ideal, since I think I'd have to put same frontmatter override into a bunch of files.

B) Allowing auto option on sidebar fallback in config.json

This is the most intuitive option, where setup is as simple as:

module.exports = {
  themeConfig: {
    sidebar: {
      // every page under this route has its sidebar overridden
      '/guide/': [
        {
          title: 'Guide',
          collapsable: false,
          children: [
            '',
            'one',
            'two',
            'three',
            'four'
          ]
        }
      ],

      // fallback to 'auto' sidebar for every route not covered by the above
      '/': 'auto'
    }
  }
}

Maybe false would also be allowed in order to explicitly fall back to disabling the sidebar, which is consistent with the other sidebar config/frontmatter.

[mrleblanc101]

Yes, thanks @citycide for the clarification.
English is not my native language.
I think it would be better to handle the sidebar only in the json config as it could become confusing to handle the same object as both json and yaml especially with more complex sidebar.

[mrleblanc101]

This idea is that I want a specify page sidebar to be able to link to other pages, somewhat like a hub. But all other page to display their heading in the sidebar like the "auto" option already does. This is quite similar to what the official Vue documentation does (but it doesn't use Vuepress)

[howar31]

I was thinking the same thing (fallback to auto) and found this issue here. My situation is that I want my homepage have custom sidebar with links I want to show. But all other article pages should have only that article titles in the sidebar for easy reading and navigation.

Please allow 'auto' in multiple sidebar config. Thanks

[bobheadxi]

I've taken a stab at this with #2380 :) this would be useful to me too, as I have pretty much the exact same use case as #1252 (comment)