\n\n\u003Cimg width=\"308\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/0e1beb6b-d06b-436c-b106-c924fead87ab\" />\n\n\u003Cimg width=\"931\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/aef6f71a-fa28-4b7c-b512-e6386e18159a\" />\n\n### Describe the solution you'd like\n\nIn my [pull request](https://github.com/vuejs/vitepress/pull/4630), I've introduced custom components that can be overridden in the `enhanceApp` function. In these custom components, I can add custom logic for rendering text, such as using the Vue compile function. \n\nAdditionally, I added a flag to skip the title update, allowing for custom logic implementation. \n\nPlease also see my PR: [https://github.com/vuejs/vitepress/pull/4630](https://github.com/vuejs/vitepress/pull/4630).\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.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.",[],4637,"Sidenav Components / Skip title update","2025-03-20T12:17:14Z","https://github.com/vuejs/vitepress/issues/4637",0.7822056,{"description":2912,"labels":2913,"number":2917,"owner":2874,"repository":2875,"state":2918,"title":2919,"updated_at":2920,"url":2921,"score":2922},"**Is your feature request related to a problem? Please describe.**\r\n\r\nThe current documentation is unclear on how to use `enhanceApp` in a custom theme `.vitepress/theme/config.js`\r\n\r\nI'm trying to add a new custom route redirecting all pages with url like `/tags/*` to `/tag/`\r\n\r\n**Describe the solution you'd like**\r\n\r\nA documentation with an example on how to declare a new custom route in `Theme.enhanceApp` in config.js.\r\nIdeally, the newly declared route can have the following format `/tags/:id`, where `:id` is extracted by the router and added to route.data.parameter\r\n\r\n**Describe alternatives you've considered**\r\n\r\nA method to surcharge the Router, or the possibility to surcharge the `loadPageModule` parameter of `createRouter`\r\nAny other solution allowing me to have parameter in my url (without ? )\r\n\r\n\r\n",[2914],{"name":2915,"color":2916},"docs","0075ca",278,"closed","Documentation on how to use `enhanceApp` ","2023-01-21T16:04:07Z","https://github.com/vuejs/vitepress/issues/278",0.7533174,{"description":2924,"labels":2925,"number":2926,"owner":2874,"repository":2875,"state":2918,"title":2927,"updated_at":2928,"url":2929,"score":2930},"### Is your feature request related to a problem? Please describe.\r\n\r\nConsider the following:\r\n\r\n**config.js**\r\n```js\r\nconst pages = [];\r\n\r\nexport default {\r\n transformPageData() {\r\n return {\r\n pages: await pages,\r\n }\r\n }\r\n}\r\n```\r\n\r\n**component.ts**\r\n```ts\r\n\u003Cscript setup lang=\"ts\">\r\n import { useData } from 'vitepress';\r\n\r\n const { page } = useData();\r\n\r\n const pages = page.value.pages;\r\n\u003C/script>\r\n```\r\n\r\n`const pages = page.value.pages;` will fire a TS error that `pages` does not exist on type PageData\r\n\r\n### Describe the solution you'd like\r\n\r\nAdd a field to the interface `PageData` like `customData` that is of type `any` so a user can assign any value to this field without a warning from TS\r\n\r\n### Describe alternatives you've considered\r\n\r\nUsing `const pages = page.value['pages'];` resolves the error.\r\n\r\n### Additional context\r\n\r\n_No response_\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.",[],1937,"Extending PageData with the transformPageData hook using a new property causes TS to complain","2023-02-21T00:04:16Z","https://github.com/vuejs/vitepress/issues/1937",0.7533508,{"description":2932,"labels":2933,"number":2937,"owner":2874,"repository":2875,"state":2918,"title":2938,"updated_at":2939,"url":2940,"score":2941},"### Describe the bug\n\n```sh\r\n\r\n vitepress v1.2.2\r\n\r\n✓ building client + server bundles...\r\n✖ rendering pages...\r\nbuild error:\r\nstr.replace is not a function\r\nTypeError: str.replace is not a function\r\n at escapeHtml$1 (file:///Users/Theo-Messi/Desktop/Theo-Docs/node_modules/.pnpm/vitepress@1.2.2_@algolia+client-search@4.23.3_@types+node@20.12.12_postcss@8.4.38_search-insi_kwabrcozogw3xguwc456c4glc4/node_modules/vitepress/dist/node/serve-BwR5EPUJ.js:19945:14)\r\n at file:///Users/Theo-Messi/Desktop/Theo-Docs/node_modules/.pnpm/vitepress@1.2.2_@algolia+client-search@4.23.3_@types+node@20.12.12_postcss@8.4.38_search-insi_kwabrcozogw3xguwc456c4glc4/node_modules/vitepress/dist/node/serve-BwR5EPUJ.js:46689:24\r\n at Array.map (\u003Canonymous>)\r\n at renderAttrs (file:///Users/Theo-Messi/Desktop/Theo-Docs/node_modules/.pnpm/vitepress@1.2.2_@algolia+client-search@4.23.3_@types+node@20.12.12_postcss@8.4.38_search-insi_kwabrcozogw3xguwc456c4glc4/node_modules/vitepress/dist/node/serve-BwR5EPUJ.js:46687:29)\r\n at file:///Users/Theo-Messi/Desktop/Theo-Docs/node_modules/.pnpm/vitepress@1.2.2_@algolia+client-search@4.23.3_@types+node@20.12.12_postcss@8.4.38_search-insi_kwabrcozogw3xguwc456c4glc4/node_modules/vitepress/dist/node/serve-BwR5EPUJ.js:46671:33\r\n at Array.map (\u003Canonymous>)\r\n at renderHead (file:///Users/Theo-Messi/Desktop/Theo-Docs/node_modules/.pnpm/vitepress@1.2.2_@algolia+client-search@4.23.3_@types+node@20.12.12_postcss@8.4.38_search-insi_kwabrcozogw3xguwc456c4glc4/node_modules/vitepress/dist/node/serve-BwR5EPUJ.js:46670:10)\r\n at renderPage (file:///Users/Theo-Messi/Desktop/Theo-Docs/node_modules/.pnpm/vitepress@1.2.2_@algolia+client-search@4.23.3_@types+node@20.12.12_postcss@8.4.38_search-insi_kwabrcozogw3xguwc456c4glc4/node_modules/vitepress/dist/node/serve-BwR5EPUJ.js:46625:13)\r\n at async pMap.concurrency (file:///Users/Theo-Messi/Desktop/Theo-Docs/node_modules/.pnpm/vitepress@1.2.2_@algolia+client-search@4.23.3_@types+node@20.12.12_postcss@8.4.38_search-insi_kwabrcozogw3xguwc456c4glc4/node_modules/vitepress/dist/node/serve-BwR5EPUJ.js:46770:11)\r\n at async file:///Users/Theo-Messi/Desktop/Theo-Docs/node_modules/.pnpm/vitepress@1.2.2_@algolia+client-search@4.23.3_@types+node@20.12.12_postcss@8.4.38_search-insi_kwabrcozogw3xguwc456c4glc4/node_modules/vitepress/dist/node/serve-BwR5EPUJ.js:2618:20\r\n ELIFECYCLE Command failed with exit code 1.\r\n```\n\n### Reproduction\n\nthis is my `package.json`\r\n```json\r\n{\r\n \"scripts\": {\r\n \"dev\": \"vitepress dev\",\r\n \"build\": \"vitepress build\",\r\n \"preview\": \"vitepress preview\",\r\n \"prettier\": \"pnpm exec prettier . --write\"\r\n },\r\n \"devDependencies\": {\r\n \"@shikijs/vitepress-twoslash\": \"^1.6.0\",\r\n \"prettier\": \"3.2.5\",\r\n \"vitepress\": \"1.2.2\",\r\n \"vitepress-plugin-google-analytics\": \"^1.0.2\"\r\n },\r\n \"dependencies\": {\r\n \"@types/node\": \"^20.12.12\",\r\n \"@vercel/analytics\": \"^1.3.1\",\r\n \"lint-staged\": \"^15.2.5\",\r\n \"simple-git-hooks\": \"^2.11.1\",\r\n \"vue\": \"^3.4.27\"\r\n },\r\n \"simple-git-hooks\": {\r\n \"pre-commit\": \"pnpm lint-staged\"\r\n },\r\n \"lint-staged\": {\r\n \"*\": [\r\n \"prettier --write --ignore-unknown\"\r\n ]\r\n }\r\n}\r\n```\n\n### Expected behavior\n\nIt should build fine\n\n### System Info\n\n```Text\nSystem:\r\n OS: macOS 14.2.1\r\n CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz\r\n Memory: 32.25 MB / 8.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 21.1.0 - ~/.nvm/versions/node/v21.1.0/bin/node\r\n Yarn: 1.22.22 - /usr/local/bin/yarn\r\n npm: 10.2.0 - ~/.nvm/versions/node/v21.1.0/bin/npm\r\n pnpm: 9.1.2 - /usr/local/bin/pnpm\r\n Browsers:\r\n Chrome: 124.0.6367.93\r\n Safari: 17.2.1\r\n npmPackages:\r\n vitepress: 1.2.2 => 1.2.2\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2934],{"name":2935,"color":2936},"bug: pending triage","e99695",3921,"upgrading to vitepress v1.2.2 build error","2024-06-03T04:41:57Z","https://github.com/vuejs/vitepress/issues/3921",0.76718384,{"description":2943,"labels":2944,"number":2946,"owner":2874,"repository":2875,"state":2918,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### Is your feature request related to a problem? Please describe.\n\nI've built up great docs in Vitepress but I need an API reference built off an OpenApi 3.1 spec. I'm having trouble finding a clean, \"Vitepressy\" way of doing this. \n\n### Describe the solution you'd like\n\nI'd like to setup a Vitepress layout (e.g., \"openapi\") and simply point to either a URL or file OpenAPI 3.1 spec which renders as nicely as [Stoplight Elements](https://stoplight.io/open-source/elements) but inherits the Vitepress theme, navigation, dark mode/lightmode etc.\n\n### Describe alternatives you've considered\n\nI tried to wrap [Stoplight Elements](https://stoplight.io/open-source/elements), but it was very heavy and slow and I couldn't figure out how to get the theme to match:\r\n```\r\n---\r\nlayout: false\r\n---\r\n\r\n\u003Clink rel=\"stylesheet\" href=\"https://unpkg.com/@stoplight/elements/styles.min.css\"/>\r\n\r\n\u003Ctemplate>\r\n \u003Ccomponent\r\n src=\"https://unpkg.com/@stoplight/elements/web-components.min.js\"\r\n :is=\"'script'\"\r\n >\u003C/component>\r\n\u003C/template>\r\n\r\n\u003CClientOnly>\r\n \u003Celements-api\r\n apiDescriptionUrl=\"https://raw.githubusercontent.com/stoplightio/Public-APIs/master/reference/zoom/openapi.yaml\"\r\n layout=\"sidebar\"\r\n router=\"hash\"\r\n />\r\n\u003C/ClientOnly>\r\n```\r\n If there are good other options out there that I don't know about, I'd gladly settle for the recommendation.\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.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.",[2945],{"name":2871,"color":2872},2091,"Provide supported approach for rendering API docs generated from an OpenAPI spec","2023-08-23T00:04:05Z","https://github.com/vuejs/vitepress/issues/2091",0.7718128,{"description":2952,"labels":2953,"number":2954,"owner":2874,"repository":2875,"state":2918,"title":2955,"updated_at":2956,"url":2957,"score":2958},"### Is your feature request related to a problem? Please describe.\n\nWe're using Custom Elements to encapsulate styles from our design system, so it'd be great to be able to tell Vitepress to ignore those tags.\r\n\r\nSuper lightweight example:\r\n\r\n```js\r\nclass ButtonExample extends HTMLElement {\r\n connectedCallback() {\r\n const designSystemCSS = '\u003Clink rel=\"stylesheet\" type=\"text/css\" href=\"designSystemURL\" />'\r\n const target = `\u003Cdiv id=\"app\">\u003C/div>`\r\n this.shadow = this.attachShadow({ mode: 'open' })\r\n this.shadow.innerHTML = designSystemCSS + target\r\n createApp(App) // App defined elsewhere ofc\r\n .mount(this.shadow.querySelector('#app'))\r\n }\r\n}\r\n```\n\n### Describe the solution you'd like\n\nProbably just being able to set `compilerOptions.isCustomElement` somewhere would be good enough?\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.",[],735,"Custom element support","2023-01-21T14:34:18Z","https://github.com/vuejs/vitepress/issues/735",0.77466,{"description":2960,"labels":2961,"number":2963,"owner":2874,"repository":2875,"state":2918,"title":2964,"updated_at":2965,"url":2966,"score":2967},"**Is your feature request related to a problem? Please describe.**\r\nDark mode is becoming ever more popular, with a number of benefits such as less strain on the eyes, and less battery consumption.\r\nPlus, it's cool.\r\n\r\nIt would be nice if VitePress would ship dark mode out of the box.\r\n\r\n**Describe the solution you'd like**\r\nIt seems to me that dark mode would be quite simple to implement due to the existing architecture of the default theme. Since CSS Variables are used and are all found in [vars.css](https://github.com/vuejs/vitepress/blob/master/src/client/theme-default/styles/vars.css), the most simple solution solution would likely to modify the value of the variables based on the user's preference.\r\n\r\nCurrently, this is what [vars.css](https://github.com/vuejs/vitepress/blob/master/src/client/theme-default/styles/vars.css) looks like:\r\n\r\n``` css\r\n:root {\r\n\r\n --c-white: #ffffff;\r\n --c-black: #000000;\r\n\r\n ...\r\n\r\n}\r\n```\r\n\r\nUsing `prefers-color-scheme`, we could do the following:\r\n\r\n``` css\r\n@media (prefers-color-scheme: light) {\r\n :root {\r\n\r\n --c-white: #ffffff;\r\n --c-black: #000000;\r\n\r\n ...\r\n\r\n }\r\n}\r\n@media (prefers-color-scheme: dark) {\r\n :root {\r\n\r\n --c-white: #000000;\r\n --c-black: #ffffff;\r\n\r\n ...\r\n\r\n }\r\n}\r\n```\r\n\r\nOf course, there are more subtleties to the change, such as dealing with shadows and such, all of which will have to adjusted to work for dark mode as well, but in general, I believe this approach should make the implementations relatively straightforward.\r\n\r\nAnother minor point that will need to be addressed is the naming convention for the variables. Since white becomes black in dark mode, it would probably be clearer if we renamed `--c-white` to something along the lines of `--c-background`.\r\n\r\n**Describe alternatives you've considered**\r\nI don't see any obvious alternatives, both in idea and implementation.\r\n\r\nOf course, one could simply do away with dark mode, but we would be missing out on its benefits.\r\n\r\n**Additional context**\r\nN/A\r\n",[2962],{"name":2868,"color":2869},251,"Dark Mode out of the box","2023-01-21T16:04:22Z","https://github.com/vuejs/vitepress/issues/251",0.7755848,["Reactive",2969],{},["Set"],["ShallowReactive",2972],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fn7I1Ffgb1Kt-MDvfQUyyarbEjqm70OrTCyew_oU3El0":-1},"/vuejs/vitepress/4484"]