`)\r\n\r\nI'm currently working on migrating and documenting the excellent Spectre CSS docs and am using Vitepress.\r\n\r\nI'm developing an ejected and modified default theme which has already come some way to solving this problem:\r\n\r\n- [original](https://picturepan2.github.io/spectre/components/menu.html) (custom app)\r\n- [migrated](https://spectre-org.github.io/spectre-docs/docs/components/menu.html) (VitePress with modified default theme)\r\n - note the `vp-doc` formatting which is all Spectre CSS\r\n - some fixed, and some not-yet fixed clashes of general class names\r\n\r\nFor reference to the use case (documenting a 3rd-party framework) here is the raw markdown page:\r\n\r\n- https://raw.githubusercontent.com/spectre-org/spectre-docs/main/docs/components/menu.md\r\n\r\nNote that:\r\n\r\n- Spectre CSS (or any other 3rd-party CSS framework) is now able to be simply \"dropped in\"\r\n- there is no pollution between VitePress and the 3rd-party framework\r\n- VitePress' default components remain fully-styled and work as they were before\r\n- `vp-doc` content can be safely used to demo any 3rd party HTML elements and classes\r\n\r\nI think I know enough to fix the problems in my modified theme and either:\r\n\r\n- publish a new \"neutral\" theme\r\n- port the changes to the default theme (ideal outcome)\r\n\r\nThere's actually not that much work; it's:\r\n\r\n- renaming the general component classes\r\n- moving some `vp-doc` classes to other locations\r\n- creating an additional unstyled entrypoint such as `without-formatting`\r\n\r\n### Describe alternatives you've considered\r\n\r\nPublishing the modified theme standalone, but then of course it would not benefit from ongoing updates.\r\n\r\n### Additional context\r\n\r\nI am proposing a PR in the coming weeks to integrate these updates.\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.dev).\r\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\r\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[3145],{"name":3146,"color":3147},"stale","ededed",3021,"vuejs","vitepress","open","Make the default theme compatible with 3rd-party CSS frameworks","2023-11-06T14:43:58Z","https://github.com/vuejs/vitepress/issues/3021",0.73659545,{"description":3157,"labels":3158,"number":3159,"owner":3149,"repository":3150,"state":3151,"title":3160,"updated_at":3161,"url":3162,"score":3163},"### Is your feature request related to a problem? Please describe.\n\nVitePress currently outputs unobfuscated class names in the default theme via scoped styles (e.g. `.VPDocAside`). These predictable selectors are easy targets for aggressive adblock filters, which can unintentionally hide more than intended (for example, on [tsx.is](https://tsx.is), sponsor sections or even entire sidebars).\n\nAt the moment, there's no ergonomic way to customize or obfuscate these selectors at the VitePress level. While adblockers serve an important role, I believe VitePress should also empower developers with the option to defend against them if they choose. Providing this flexibility would be a unique value-add for VitePress, and can potentially be an underrated but impactful feature edge.\n\n### Describe the solution you'd like\n\nThe default theme currently uses Vue scoped styles. I recommend migrating it to CSS Modules instead.\n\nVue & Vite already has solid CSS Modules support, so the migration should be straightforward. Using the underlying Vite config, developers can customize class naming.\n\nThis approach gives developers more control without extra complexity, and also helps mitigate the issue of predictable class names being aggressively targeted (e.g. by adblock filters). Personally, I would configure a random hash on each build so that selectors differ on every deploy.\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\nThis would be a breaking change, since the underlying mechanism for CSS scoping would change fundamentally.\n\n### Validations\n\n- [x] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [x] Read the [docs](https://vitepress.dev).\n- [x] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [x] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[],4920,"Use CSS Modules in default VitePress theme for more flexible class scoping","2025-08-22T09:32:29Z","https://github.com/vuejs/vitepress/issues/4920",0.7442139,{"description":3165,"labels":3166,"number":3167,"owner":3149,"repository":3150,"state":3168,"title":3169,"updated_at":3170,"url":3171,"score":3172},"### Is your feature request related to a problem? Please describe.\n\nN/A\n\n### Describe the solution you'd like\n\nAllow custom titles of containers to be manipulated with Markdown, such as **bold**, _italics_, or hyperlinks.\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.vuejs.org).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[],765,"closed","Markdown formatting in custom container titles","2023-01-21T14:34:10Z","https://github.com/vuejs/vitepress/issues/765",0.6570093,{"description":3174,"labels":3175,"number":3177,"owner":3149,"repository":3150,"state":3168,"title":3178,"updated_at":3179,"url":3180,"score":3181},"### Is your feature request related to a problem? Please describe.\n\nIn VuePress it was possible to set default titles for TIP, INFO, WARNING, DANGER, DETAILS in config but in VitePress it doesn't work anymore.\n\n### Describe the solution you'd like\n\nAdd something like this in a config:\r\n```js\r\nthemeConfig: {\r\n\tcontainer: {\r\n\t\ttip: 'Tip',\r\n\t\tinfo: 'Info',\r\n\t\twarning: \"Warning\",\r\n\t\tdanger: 'Danger',\r\n\t\tdetails: \"Details\"\r\n\t},\r\n}\r\n```\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.vuejs.org).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[3176],{"name":3146,"color":3147},1947,"Add i18n support for default Custom Container titles","2023-08-11T00:04:11Z","https://github.com/vuejs/vitepress/issues/1947",0.67170334,{"description":3183,"labels":3184,"number":3185,"owner":3149,"repository":3150,"state":3168,"title":3186,"updated_at":3187,"url":3188,"score":3189},"### Is your feature request related to a problem? Please describe.\n\nNo\n\n### Describe the solution you'd like\n\nThe custom container are a very useful feature and it can be configurable in the .vitepress/config.js file with color for \r\nname,border, border-dark, background, background-dark in the config file with these 5 options i think it will make a better for a better blog points.\n\n### Describe alternatives you've considered\n\nHaving the lack of customization for the custom container boxes. I am aware that you can create components to do the same things but the \"::: name :::\" syntax is better to view in markdown as well as more read able than having it wrapped inside a html tag.\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.vuejs.org).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[],1246,"Adding Custom Containers from the config.js file ","2023-01-21T14:26:51Z","https://github.com/vuejs/vitepress/issues/1246",0.6721674,{"description":3191,"labels":3192,"number":3196,"owner":3149,"repository":3150,"state":3168,"title":3197,"updated_at":3198,"url":3199,"score":3200},"### Is your feature request related to a problem? Please describe.\r\n\r\nWhen I write documentation, I sometimes want to have some sort of introductory paragraph to set some context for the readers. These kinds of introductory paragraphs are often visually emphasized to catch attention and get even more impactful. Usually, the emphasis relies on styling (e.g. bigger font size, bolder font weights, etc).\r\n\r\nI really think it would be convenient for many users to be able to specify introductions in a straight-forward and _markdownish_ way, so that such content gets emphasized through styling while preserving other markdown rules and features .\r\n\r\n### Describe the solution you'd like\r\n\r\nTo address this need, we basically want to take a whole identified block and apply some styles to make it stand out. It turns out this kind of feature already exists in Vitepress: [custom containers](https://vitepress.dev/guide/markdown#custom-containers). These perfectly match our needs because:\r\n- they can be clearly identified because the syntax really pops out\r\n- their content still benefit from markdown syntax\r\n- they contextually provide their content a special, highlighted role\r\n\r\nMy belief is that it makes sense to also provide a `intro` custom container because those share a common philosophy. However, there is a slight difference : unlike other custom containers, I feel like it does not make any sense for `intro`s to include default and custom titles because well… they're introductions).\r\n\r\n### Describe alternatives you've considered\r\n\r\nI used to work this around by explicitly wrapping my introductory paragraph with a `\u003Cp class=\"intro\">\u003C/p>` block, and defining some CSS on the `.intro` selector, since it is supported. This works just fine, but being in a explicit HTML block prevents me from benefiting from other markdown features. For example, this would not work as expected:\r\n\r\n```md\r\n\u003Cp class=\"intro\">\r\n [click me](https://github.com)\r\n\u003C/p>\r\n```` \r\n\r\n### Additional context\r\n\r\nI've came up with the following draft PR: #2474. It's marked as draft because [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md) state that we \"should open a suggestion issue first \", but could not resist to give it a try.\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.dev).\r\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\r\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[3193],{"name":3194,"color":3195},"theme","0754FB",2473,"Introduction custom container","2023-07-29T00:04:10Z","https://github.com/vuejs/vitepress/issues/2473",0.68816966,{"description":3202,"labels":3203,"number":3207,"owner":3149,"repository":3150,"state":3168,"title":3208,"updated_at":3209,"url":3210,"score":3211},"### Describe the bug\n\n\nThe current implementation of the collapsible **sidebar** navigation uses div elements and custom JavaScript to function as an accordion. This non-semantic approach creates significant accessibility issues.\n\nAssistive technologies, like screen readers, cannot properly interpret the role or state (expanded/collapsed) of these components. This results in a poor user experience for individuals who rely on such technology.\n\nI propose replacing the current div-based implementation with the native HTML \u003Cdetails> and \u003Csummary> elements. This would:\n\nProvide full accessibility out-of-the-box for screen reader and keyboard-only users.\n\nReduce custom JavaScript and engineering complexity by leveraging native browser behavior.\n\nAlign the component with modern web standards and semantic best practices.\n\n\n\n### Reproduction\n\nNavigate to any page in the VitePress documentation that uses a collapsible container, such as the [Vitepress Docs](https://vitepress.dev/guide/what-is-vitepress).\n\n\nAttempt to navigate the **sidebar** with a screen reader (e.g., VoiceOver, NVDA, JAWS). The screen reader fails to announce it as a collapsible element or communicate its state.\n\n### Expected behavior\n\nFor sidebar to look and function exactly as it does now but with better accessibility.\n\n\n### System Info\n\n```Text\nJAWS, NVDA, VOICEOVER\n```\n",[3204],{"name":3205,"color":3206},"need more info","bdbefc",4846,"Bug: Custom Container/Accordion component is not accessible and should use native \u003Cdetails>/\u003Csummary> elements","2025-07-17T06:30:42Z","https://github.com/vuejs/vitepress/issues/4846",0.7045245,{"description":3213,"labels":3214,"number":3216,"owner":3149,"repository":3150,"state":3168,"title":3217,"updated_at":3218,"url":3219,"score":3220},"### Is your feature request related to a problem? Please describe.\r\n\r\nId like to not use a `|` in the browser title bar of my application, instead, any other string.\r\n\r\n### Describe the solution you'd like\r\n\r\nin config.js, at some place...\r\n\r\n```js\r\n{\r\n ...\r\n titleDelimiter: '·',\r\n ...\r\n}\r\n```\r\n\r\n### Describe alternatives you've considered\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\nI should think it would be able to take even an HTML entity like `·` and render that.\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.vuejs.org).\r\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\r\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[3215],{"name":3194,"color":3195},1195,"Provide option to change title delimiter","2023-01-21T14:26:36Z","https://github.com/vuejs/vitepress/issues/1195",0.7197865,{"description":3222,"labels":3223,"number":3224,"owner":3149,"repository":3150,"state":3168,"title":3225,"updated_at":3226,"url":3227,"score":3228},"### Is your feature request related to a problem? Please describe.\n\n`Sidebar` define in code:\n\n```ts\nexport type Sidebar = SidebarItem[] | SidebarMulti;\n\nexport interface SidebarMulti {\n [path: string]: SidebarItem[] | { items: SidebarItem[]; base: string };\n}\n\nexport type SidebarItem = {\n text?: string;\n link?: string;\n items?: SidebarItem[];\n collapsed?: boolean;\n base?: string;\n docFooterText?: string;\n rel?: string;\n target?: string;\n};\n```\n\nThis is a direcotry structure:\n\n```text\n└── misc\n ├── cap1.md\n ├── cap2\n │ ├── cap2-1.md\n │ └── index.md\n ├── index.md\n └── intro.md\n```\n\nI config `sidebar` in `config.mts`:\n\n```ts\nsidebar: {\n '/misc': {\n base: '/misc',\n items: [\n { text: 'Intro', link: '/intro' },\n { text: 'Cap1', link: '/cap1' },\n {\n text: 'Cap2',\n base: '/cap2',\n items: [{ text: 'Cap2.1', link: '/cap2-1' }],\n },\n ],\n },\n}\n```\n\nActual routes:\n\n```text\n/misc/intro.html\n/misc/cap1.html\n/cap2/cap2-1.html\n```\n\n### Describe the solution you'd like\n\nIn this setup, it looks like `SidebarItem.base` completely replaces the `SidebarMulti.base`, instead of working relative to it — which feels a bit unexpected.\n\nWould it be possible for VitePress to support making nested base values inherit from the parent?\n\nSomething like this:\n\n```text\n/misc/intro.html\n/misc/cap1.html\n/misc/cap2/cap2-1.html\n```\n\nThat’d make things way more intuitive, especially when building out deeper folder structures.\n\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\nVitepress version: `2.0.0-alpha.7`\n\nHere is a minimal reproduction: [https://stackblitz.com/edit/vite-yrm66kkm?file=docs%2F.vitepress%2Fconfig.ts](https://stackblitz.com/edit/vite-yrm66kkm?file=docs%2F.vitepress%2Fconfig.ts)\n\n### Validations\n\n- [x] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [x] Read the [docs](https://vitepress.dev).\n- [x] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [x] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[],4821,"`SidebarItem.base` overrides parent `SidebarMulti.base` instead of inheriting","2025-07-02T09:09:15Z","https://github.com/vuejs/vitepress/issues/4821",0.7218403,{"description":3230,"labels":3231,"number":3235,"owner":3149,"repository":3150,"state":3168,"title":3236,"updated_at":3237,"url":3238,"score":3239},"### Describe the bug\r\n\r\nOn setting frontmatter like below, the page title is still changed to `Home | foo`. It works fine if `home: true` is removed.\r\n\r\n```md\r\n---\r\nhome: true\r\n# ...\r\ntitle: ' '\r\n---\r\n```\r\n\r\nExpected title to be `foo` instead. (`foo` is set as `title` in `.vitepress/config.ts`, using `DefaultTheme`.)\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/coc)\r\n- [X] Read the [docs](https://vitepress.vuejs.org/).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3232],{"name":3233,"color":3234},"bug: pending triage","e99695",492,"`title: x` is not respected if `home: true`","2023-01-21T16:20:14Z","https://github.com/vuejs/vitepress/issues/492",0.72401506,["Reactive",3241],{},["Set"],["ShallowReactive",3244],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fv6UYAkOopS-4srSTu9Tnj1Li4nFraTHxn1Q2M1ZHEgk":-1},"/vuejs/vitepress/4928"]