\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.7623387,{"description":2902,"labels":2903,"number":2906,"owner":2874,"repository":2875,"state":2907,"title":2908,"updated_at":2909,"url":2910,"score":2911},"### Describe the bug\n\nI've ran _Crome's Lighthouse_ accessibility audit against the page, and it's failing, for the element marked as: `button.VPSwitch.VPSwitchAppearance` the item was recently reviewed for a11y and code (alpha58) compiles it inside a label.\r\n\r\nLighthouse tests expects the tag button has an [explicit](https://dequeuniversity.com/rules/axe/4.4/button-name) `aria-label` attribute. I can't say if it's false positive but affects the report.\n\n### Reproduction\n\n1. Setup a basic site\r\n2. Open Chrome browser (v.100.x)\r\n3. Open the basic website and browser's console\r\n4. Inside Tab Lighthouse (9.4.0), check Accessibility and Desktop mode radio button \r\n5. Run Generate Report\r\n6. See: warning Buttons do not have an accessible name marked for button.VPSwitch.VPSwitchAppearance\r\n\n\n### Expected behavior\n\nAny warning expected for a11y tests.\n\n### System Info\n\n```shell\nSystem:\r\n OS: Linux 5.10 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)\r\n CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz\r\n Memory: 11.43 GB / 12.31 GB\r\n Container: Yes\r\n Shell: 5.1.16 - /bin/bash\r\n Binaries:\r\n Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node\r\n Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn\r\n npm: 8.19.2 - ~/.nvm/versions/node/v16.15.1/bin/npm\r\n npmPackages:\r\n vitepress: ^1.0.0-alpha.58 => 1.0.0-alpha.58\n```\n\n\n### Additional context\n\nrelated to #2080\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] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2904,2905],{"name":2885,"color":2886},{"name":2871,"color":2872},2096,"closed","Buttons do not have an accessible name","2023-08-12T00:04:27Z","https://github.com/vuejs/vitepress/issues/2096",0.69204354,{"description":2913,"labels":2914,"number":2918,"owner":2874,"repository":2875,"state":2907,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### Describe the bug\n\nHere is my configuration\r\nmy website: https://lark-base-team.github.io/js-sdk-docs/\r\n```\r\nimport { defineConfig } from 'vitepress'\r\nimport { getZhSideBar } from './zh-sidebar';\r\nimport { getEnSideBar } from './en-sidebar';\r\n\r\n\r\n// https://vitepress.dev/reference/site-config\r\nexport default defineConfig({\r\n lastUpdated: true,\r\n cleanUrls: true,\r\n base: '/js-sdk-docs/',\r\n themeConfig: {\r\n logo: '/logo.svg',\r\n search: {\r\n provider: 'local'\r\n },\r\n nav: [\r\n { text: 'API', link: '/zh/api/guide', activeMatch: 'zh/api' },\r\n ],\r\n },\r\n head: [\r\n ['link', { rel: 'icon', href: '/js-sdk-docs/logo.svg' }],\r\n ],\r\n title: 'Base JS SDK',\r\n description: 'Base JS SDK Docs',\r\n // sitemap: {\r\n // hostname: 'https://basejsapi.com',\r\n // },\r\n lang: 'zh',\r\n locales: {\r\n zh: {\r\n label: '中文',\r\n lang: 'zh',\r\n dir: '/zh',\r\n title: 'Base JS SDK',\r\n description: 'Base JS SDK Docs',\r\n themeConfig: {\r\n logo: '/logo.svg',\r\n search: {\r\n provider: 'local'\r\n },\r\n nav: [\r\n { text: 'API', link: '/zh/api/guide', activeMatch: 'zh/api' },\r\n ],\r\n\r\n sidebar: getZhSideBar(),\r\n },\r\n },\r\n en: {\r\n label: 'English',\r\n lang: 'en',\r\n dir: '/en',\r\n title: 'Base JS SDK',\r\n description: 'Base JS SDK Docs',\r\n themeConfig: {\r\n logo: '/logo.svg',\r\n search: {\r\n provider: 'local'\r\n },\r\n nav: [\r\n { text: 'API', link: '/en/api/guide.md' },\r\n ],\r\n sidebar: getEnSideBar(),\r\n },\r\n }\r\n },\r\n})\r\n\r\n```\n\n### Reproduction\n\nlike my config\n\n### Expected behavior\n\nI hope to demonstrate the ability to switch languages.\n\n### System Info\n\n```Text\nSystem:\r\n OS: macOS 13.6\r\n CPU: (10) arm64 Apple M1 Pro\r\n Memory: 208.28 MB / 32.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node\r\n Yarn: 1.22.19 - /opt/homebrew/bin/yarn\r\n npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm\r\n pnpm: 8.7.4 - ~/.nvm/versions/node/v18.14.2/bin/pnpm\r\n Browsers:\r\n Chrome: 118.0.5993.70\r\n Safari: 17.0\r\n npmPackages:\r\n vitepress: 1.0.0-rc.10 => 1.0.0-rc.10\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.",[2915],{"name":2916,"color":2917},"question","5D5FAE",3099,"The homepage lacks the ability to switch languages. ","2023-10-27T00:04:14Z","https://github.com/vuejs/vitepress/issues/3099",0.70393884,{"description":2924,"labels":2925,"number":2932,"owner":2874,"repository":2875,"state":2907,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### Is your feature request related to a problem? Please describe.\n\nFind myself wanting to use VPButton and VPSponsors on a few places throughout my site. Right now, I exported them through a patch, but would great if they were exported by default.\n\n### Describe the solution you'd like\n\nVPButton and VPSponsors exported.\n\n### Describe alternatives you've considered\n\nCurrently use the following patch:\r\n\r\n```diff\r\ndiff --git a/dist/client/theme-default/without-fonts.js b/dist/client/theme-default/without-fonts.js\r\nindex 2b760aa398b7ac1881551ab146d7d308ef2277a3..a2940ca0b99b7673d8914e4bf332f57c588e8f46 100644\r\n--- a/dist/client/theme-default/without-fonts.js\r\n+++ b/dist/client/theme-default/without-fonts.js\r\n@@ -11,10 +11,12 @@ import Layout from './Layout.vue';\r\n // Note: if we add more optional components here, i.e. components that are not\r\n // used in the theme by default unless the user imports them, make sure to update\r\n // the `lazyDefaultThemeComponentsRE` regex in src/node/build/bundle.ts.\r\n+export { default as VPButton } from './components/VPButton.vue';\r\n export { default as VPHomeHero } from './components/VPHomeHero.vue';\r\n export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue';\r\n export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue';\r\n export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue';\r\n+export { default as VPSponsors } from './components/VPSponsors.vue';\r\n export { default as VPTeamPage } from './components/VPTeamPage.vue';\r\n export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue';\r\n export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue';\r\ndiff --git a/theme.d.ts b/theme.d.ts\r\nindex 4b1076b5fbda893eb6f4a5df6a40c15d1bb379ba..177f5a6aa9602e0eeae954137bcce1ac0080ddef 100644\r\n--- a/theme.d.ts\r\n+++ b/theme.d.ts\r\n@@ -3,10 +3,12 @@ import type { DefineComponent } from 'vue'\r\n import { EnhanceAppContext } from './dist/client/index.js'\r\n \r\n // TODO: add props for these\r\n+export const VPButton: DefineComponent\r\n export const VPHomeHero: DefineComponent\r\n export const VPHomeFeatures: DefineComponent\r\n export const VPHomeSponsors: DefineComponent\r\n export const VPDocAsideSponsors: DefineComponent\r\n+export const VPSponsors: DefineComponent\r\n export const VPTeamPage: DefineComponent\r\n export const VPTeamPageTitle: DefineComponent\r\n export const VPTeamPageSection: DefineComponent\r\n```\n\n### Additional context\n\nHappy to open a PR for this!\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.",[2926,2929],{"name":2927,"color":2928},"theme","0754FB",{"name":2930,"color":2931},"contribution welcome","11E4B8",2765,"Export VPButton + VPSponsors","2023-08-23T00:04:06Z","https://github.com/vuejs/vitepress/issues/2765",0.71136516,{"description":2938,"labels":2939,"number":2940,"owner":2874,"repository":2875,"state":2907,"title":2941,"updated_at":2942,"url":2943,"score":2944},"### Is your feature request related to a problem? Please describe.\n\nI currently have a practical requirement to change the background image of the homepage based on the button state with the class \"VPSwitch VPSwitchAppearance\".\r\n\r\nHowever, this button does not have an id attribute or a ref attribute, which forces me to use the `document.querySelector()` method to get this element.\r\n\r\nThis is quite uncomfortable in the Vue3 environment.\n\n### Describe the solution you'd like\n\nGive ref tags to all key elements\n\n### Describe alternatives you've considered\n\nnull\n\n### Additional context\n\n\r\n\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.",[],3574,"Please assign the ref attribute to the key label element.","2024-02-23T00:05:12Z","https://github.com/vuejs/vitepress/issues/3574",0.7324136,{"description":2946,"labels":2947,"number":2950,"owner":2874,"repository":2875,"state":2907,"title":2951,"updated_at":2952,"url":2953,"score":2954},"### Describe the bug\n\nRunning firefox's accessibility tests fails on \"toggle dark mode\" switch.\r\nhttps://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names#form_elements_should_have_a_visible_text_label\r\n\r\na11y accessibility wcag\n\n### Reproduction\n\n- build a basic website\r\n- inspect it with the browser's console accessibility tool\n\n### Expected behavior\n\nall form input elements must have a label or attribute `aria-labelled=` with accessible value\n\n### System Info\n\n```shell\nSystem:\r\n OS: Linux 5.10 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)\r\n CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz\r\n Memory: 11.91 GB / 12.31 GB\r\n Container: Yes\r\n Shell: 5.1.16 - /bin/bash\r\n Binaries:\r\n Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node\r\n Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn\r\n npm: 8.19.2 - ~/.nvm/versions/node/v16.15.1/bin/npm\r\n npmPackages:\r\n vitepress: ^1.0.0-alpha.49 => 1.0.0-alpha.49\n```\n\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] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2948,2949],{"name":2927,"color":2928},{"name":2868,"color":2869},2080,"form elements must have a visible label","2023-03-22T00:03:24Z","https://github.com/vuejs/vitepress/issues/2080",0.7329157,{"description":2956,"labels":2957,"number":2959,"owner":2874,"repository":2875,"state":2907,"title":2960,"updated_at":2961,"url":2962,"score":2963},"\u003C!--\r\nNOTE:\r\nVitePress is still WIP, and it is not compatible with VuePress.\r\nPlease do not open issue about default theme missing features or something doesn't work like VuePress.\r\n-->\r\n\r\n**Describe the bug**\r\nNavbar items doesnt change in ssr render.\r\nAnd sidebar doesnt change when build with a site base.\r\n\r\n**To Reproduce**\r\nSteps to reproduce the behavior:\r\n1. clone this [repo](https://github.com/dewfall123/vitepress-issue-1)\r\n2. run\r\n`yarn`\r\n`yarn build`\r\n`yarn build-dev`\r\n3. open http://127.0.0.1:3002 and switch the language to Chinese.\r\nThe first nav doesnt change to Chinese, witch should be `指南`。\r\n\r\nThe second bug.\r\n1. set a site base.\r\n2. run \r\n`yarn build`\r\n`yarn build-dev`\r\n3. switch the language to Chinese, Sidebar doesnt change.\r\n\r\n**Expected behavior**\r\nNavbar and sidebar should change when switch the language to Chinese.\r\n\r\n**System Info**\r\n- vitepress version: 0.7.0\r\n- vite version: v1.0.0-rc.4\r\n- Node version: 14\r\n- OS version: windows 10\r\n\r\n**Additional context**\r\nI am trying to fix this.\r\n",[2958],{"name":2885,"color":2886},106,"Navbar items doesnt change when switch language","2023-01-21T16:24:22Z","https://github.com/vuejs/vitepress/issues/106",0.73902774,{"description":2965,"labels":2966,"number":2970,"owner":2874,"repository":2875,"state":2907,"title":2971,"updated_at":2972,"url":2973,"score":2974},"### Describe the bug\n\nWhen I customize a link component and introduce it into vitepress, the `vp-doc` class generates a style override on my custom style, causing my style to not display properly:\r\n\r\nI've tried `vp-raw` for style isolation, but it still doesn't display my custom styles properly\r\n\r\nI don't know how to solve this style override problem, which has been bothering me for a long time\n\n### Reproduction\n\nThis is my custom link component:\r\n```tsx\r\nimport { defineComponent, PropType, ref } from \"vue\";\r\nimport \"uno.css\";\r\n\r\nexport type IType = 'default' | 'primary' | 'success' | 'warning' | 'danger'| 'info'\r\nexport type IColor = 'black' | 'blue' | 'green' | 'yellow'| 'red' | 'gray'\r\nexport const props = {\r\n type: {\r\n type: String as PropType\u003CIType>,\r\n default: \"default\",\r\n },\r\n color: {\r\n type: String as PropType\u003CIColor>,\r\n default: \"black\",\r\n },\r\n plain: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n href: {\r\n type: String,\r\n required: true,\r\n },\r\n} as const;\r\n\r\nexport default defineComponent({\r\n name: \"CLink\",\r\n props,\r\n setup(props, { slots }) {\r\n return () => (\r\n \u003Ca\r\n class={`\r\n text-${props.plain ? props.color + \"-500\" : \"white\"}\r\n hover:text-${props.color}-400\r\n cursor-pointer\r\n text-lg\r\n hover:text-white\r\n transition duration-300 ease-in-out transform hover:scale-105\r\n mx-1\r\n decoration-none\r\n `}\r\n href={props.href} \r\n >\r\n {slots.default ? slots.default() : 'Link'}\r\n \u003C/a>\r\n ); \r\n },\r\n});\r\n```\r\n\r\nHere's my demo code from the documentation:\r\n```vue\r\n\u003Cdiv class=\"vp-raw\">\r\n \u003CCLink href=\"#\" class=\"primary\" color=\"blue\">Primary Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"success\" color=\"green\">Success Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"warning\" color=\"yellow\">Warning Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"danger\" color=\"red\">Danger Link\u003C/CLink>\r\n \u003CCLink href=\"#\" type=\"info\" color=\"gray\">Info Link\u003C/CLink>\r\n\u003C/div>\r\n```\r\n\r\n\r\n\n\n### Expected behavior\n\nI want to be able to display the style of my components properly, in fact I can be sure that the `vp-doc` generated style override, I delete this class by manipulating the DOM and then the style can be displayed normally, but this will make the other functions of vitepress failure, I want to be able to display the style of the component without affecting vitepress\n\n### System Info\n\n```shell\n{\r\n \"name\": \"catisol-ui\",\r\n \"version\": \"0.9.1\",\r\n \"description\": \"\",\r\n \"main\": \"index.js\",\r\n \"scripts\": {\r\n \"test\": \"vitest\",\r\n \"build\": \"vite build\",\r\n \"dev\": \"vite\",\r\n \"docs:dev\": \"vitepress dev docs\",\r\n \"docs:build\": \"vitepress build docs\",\r\n \"docs:serve\": \"vitepress serve docs\"\r\n },\r\n \"keywords\": [],\r\n \"author\": \"\",\r\n \"license\": \"ISC\",\r\n \"devDependencies\": {\r\n \"@iconify-json/ic\": \"1.1.4\",\r\n \"@vitejs/plugin-vue\": \"3.0.3\",\r\n \"@vitejs/plugin-vue-jsx\": \"2.0.0\",\r\n \"@vue/test-utils\": \"2.0.2\",\r\n \"happy-dom\": \"6.0.4\",\r\n \"postcss\": \"^8.4.21\",\r\n \"postcss-prefix-selector\": \"^1.16.0\",\r\n \"unocss\": \"0.45.6\",\r\n \"vite\": \"3.0.7\",\r\n \"vitepress\": \"v1.0.0-alpha.31\",\r\n \"vitest\": \"0.21.1\"\r\n },\r\n \"maintainers\": [\r\n \"isolcat\"\r\n ],\r\n \"dependencies\": {\r\n \"@unocss/vite\": \"^0.45.13\",\r\n \"vue\": \"3.2.37\"\r\n }\r\n}\n```\n\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] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2967],{"name":2968,"color":2969},"need more info","bdbefc",1777,"vp-raw cannot isolate style conflicts generated by v-doc classes","2023-01-21T14:16:44Z","https://github.com/vuejs/vitepress/issues/1777",0.7484646,["Reactive",2976],{},["Set"],["ShallowReactive",2979],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fNvOeZ8T73XqUIrg-E3r2KSpcUrKBOUeA0eIOZyDs1ug":-1},"/vuejs/vitepress/2021"]