\n\n### Expected behavior\n\nI hope to use SVG and other methods instead of using masks to display icons, which can avoid frequent redrawing\n\n### System Info\n\n```Text\n\"vitepress\": \"^1.6.4\",\n```\n\n### Additional context\n\n\u003Cimg width=\"2559\" height=\"1042\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/39db5990-f3ee-47bb-8bcf-49272a1918f4\" />\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.",[3145],{"name":3146,"color":3147},"bug: pending triage","e99695",4917,"vuejs","vitepress","open","Bug: Frequent triggering of redrawing of navigation bar icons","2025-08-21T09:14:41Z","https://github.com/vuejs/vitepress/issues/4917",0.70861876,{"description":3157,"labels":3158,"number":3159,"owner":3149,"repository":3150,"state":3160,"title":3161,"updated_at":3162,"url":3163,"score":3164},"### What problem does this feature solve?\r\nIt is actually a layout problem of `vue-router-next` documentation. Please accept my apology if I reported it in the wrong place.\r\n\r\nCurrently, the [official documentation site] layout is not worked as expected when it comes to the screen size with `959px` and `719px` breakpoints. \r\n\r\nUnexpected behaviours with breakpoints:\r\n- `959px`: `16.4rem` is applied to `margin-left` in the main section.\r\n- `719px`: `var(--sidebar-width)` is applied to `padding-left` in the main section.\r\n\r\nAs a result, the main content is hard to read when readers are using small-size screens, such as mobile phones, as the unexpected extra spaces are occupied.\r\n\r\n[official documentation site]: https://next.router.vuejs.org/guide/#html\r\n\r\n### What does the proposed API look like?\r\nI haven't used 'vitepress' before so I don't know if it is actually an issue of vitepress. But I have a 'temporary' solution for this issue:\r\n\r\nIn `/docs/.vitepress/theme/Layout.vue`:\r\n\r\n```vue\r\n\u003Cstyle>\r\n...\r\n\r\n/* Fix: Unexpected margin at 959px breakpoint */\r\n@media screen and (max-width: 959px) {\r\n .theme main {\r\n margin-left: 0;\r\n }\r\n}\r\n\r\n/* Fix: Unexpected padding at 719px breakpoint */\r\n@media screen and (max-width: 719px) {\r\n .theme main {\r\n padding-left: 0;\r\n }\r\n}\r\n\u003C/style>\r\n```\r\n\r\nAnd it should fix the layout problem existed.\r\n\r\nI believe that small changes can bring a big positive effect on the community. Thank you for reviewing this issue.\r\n\r\n\u003C!-- generated by vue-issues. DO NOT REMOVE -->",[],121,"closed","Better Docs Layout for Small Screen","2023-01-21T16:24:17Z","https://github.com/vuejs/vitepress/issues/121",0.6456961,{"description":3166,"labels":3167,"number":3168,"owner":3149,"repository":3150,"state":3160,"title":3169,"updated_at":3170,"url":3171,"score":3172},"\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\nBetween screen sizes `720px` and `751px`, the search field is collapsed, but still takes up the space of the expanded version:\r\n\r\n\u003Cimg width=\"500\" alt=\"Screenshot of VitePress homepage\" src=\"https://user-images.githubusercontent.com/45149421/109382325-0c577e00-78e0-11eb-8092-25cf95d98c9e.png\">\r\n\r\nThis issue seems to be baked into the VitePress default theme.\r\n\r\n**To Reproduce**\r\nSteps to reproduce the behavior: \r\n1. Open a device with screen width larger than `800px` (laptop or desktop).\r\n2. Visit any VitePress site (example: https://vitepress.vuejs.org).\r\n3. Slowly resize the browser window, paying special attention when getting to the `751px` threshold.\r\n4. Done.\r\n\r\n**Expected behavior**\r\nA clear and concise description of what you expected to happen.\r\n\r\nThe search field should only collapse at screen sizes smaller than `720px`.\r\n\r\n**System Info**\r\n- vitepress version: 0.12.2\r\n- vite version: unknown for https://vitepress.vuejs.org, `2.0.3` for local reproduction.\r\n- Node version: unknown for https://vitepress.vuejs.org, `15.10.0` for local reproduction.\r\n- OS version: unknown for https://vitepress.vuejs.org, MacOS 11.1 for local reproduction.\r\n\r\n**Additional context**\r\nAdd any other context about the problem here.\r\n\r\nFrom https://github.com/vuejs/vitepress/blob/master/src/client/theme-default/components/AlgoliaSearchBox.vue:\r\n``` js\r\n@media (min-width: 720px) {\r\n .algolia-search-box {\r\n padding-left: 8px;\r\n min-width: 176.3px; /* avoid layout shift */\r\n }\r\n}\r\n@media (min-width: 751px) {\r\n .algolia-search-box {\r\n padding-left: 8px;\r\n }\r\n .algolia-search-box .DocSearch-Button-Placeholder {\r\n padding-left: 8px;\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n }\r\n}\r\n```\r\n\r\nI still don't quite understand the purpose of the `@media (min-width: 751px) {...}`, since in other default theme components, the screen width breakpoint is at `720px`, but it seems to me that combining the two media queries should solve the problem.\r\n\r\nAnother solution might be to simply move the `min-width: 176.3px;` under the `@media (min-width: 751px) {...)` section.\r\n\r\n",[],250,"Algolia search field collapse behaviour","2023-01-21T16:22:23Z","https://github.com/vuejs/vitepress/issues/250",0.6836753,{"description":3174,"labels":3175,"number":3179,"owner":3149,"repository":3150,"state":3160,"title":3180,"updated_at":3181,"url":3182,"score":3183},"### Describe the bug\n\n\u003Cimg width=\"606\" alt=\"image\" src=\"https://user-images.githubusercontent.com/38745323/183691344-07a0abfb-b01a-4d79-86c8-1b22fb5fc957.png\">\r\n\r\n\u003Cimg width=\"1227\" alt=\"image\" src=\"https://user-images.githubusercontent.com/38745323/183691940-a9caf108-f3d1-4569-8f77-4c1486ee4fa4.png\">\r\n\n\n### Reproduction\n\nWhen I custom the max-width use --vp-layout-max-width: 1680px;\r\n\r\nThen style of sidebar is ugly when I resize the window.\n\n### Expected behavior\n\nThe title of the header and the sidebar are always aligned.\n\n### System Info\n\n```shell\nSystem:\r\n OS: macOS 12.4\r\n CPU: (10) arm64 Apple M1 Max\r\n Memory: 1.91 GB / 64.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node\r\n Yarn: 1.22.18 - /opt/homebrew/bin/yarn\r\n npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm\r\n Browsers:\r\n Chrome: 104.0.5112.79\r\n Firefox: 101.0\r\n Safari: 15.5\r\n npmPackages:\r\n vitepress: ^1.0.0-alpha.4 => 1.0.0-alpha.4\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.",[3176],{"name":3177,"color":3178},"need more info","bdbefc",1147,"Style error when custom max-width","2023-01-21T14:20:45Z","https://github.com/vuejs/vitepress/issues/1147",0.68711525,{"description":3185,"labels":3186,"number":3188,"owner":3149,"repository":3150,"state":3160,"title":3189,"updated_at":3190,"url":3191,"score":3192},"### Describe the bug\n\nhttps://flowbite-vue.com/pages/getting-started\n\n\u003Cimg width=\"97\" height=\"103\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/eb9f85c1-6df8-47e9-950a-8b1aeb92b7ba\" />\n\n\n```vue\n\u003Cscript setup>\nimport { FwbButton } from 'flowbite-vue'\n\u003C/script>\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cfwb-button color=\"default\">Default\u003C/fwb-button>\n \u003C/div>\n\u003C/template>\n```\n\n### Reproduction\n\nhttps://github.com/jk2K/testvitepress\n\ntech stack\n1. https://flowbite-vue.com/pages/getting-started\n2. tailwindcss v4\n\n### Expected behavior\n\n\u003Cimg width=\"103\" height=\"50\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7bffdf53-2faf-4257-87c2-4f60511b7060\" />\n\n### System Info\n\n```Text\nSystem:\n OS: macOS 15.5\n CPU: (14) arm64 Apple M4 Pro\n Memory: 218.33 MB / 48.00 GB\n Shell: 5.9 - /bin/zsh\n Binaries:\n Node: 22.16.0 - ~/.nvm/versions/node/v22.16.0/bin/node\n npm: 10.9.2 - ~/.nvm/versions/node/v22.16.0/bin/npm\n pnpm: 10.11.0 - /opt/homebrew/bin/pnpm\n Browsers:\n Chrome: 138.0.7204.159\n Safari: 18.5\n npmPackages:\n vitepress: ^1.6.3 => 1.6.3\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.",[3187],{"name":3146,"color":3147},4856,"vitepress not work for flowbite-vue","2025-07-25T10:13:26Z","https://github.com/vuejs/vitepress/issues/4856",0.6940814,{"description":3194,"labels":3195,"number":3199,"owner":3149,"repository":3150,"state":3160,"title":3200,"updated_at":3201,"url":3202,"score":3203},"### Describe the bug\n\nUsing the browser with resolution 1280px, there is an media query overlap for the toc \"On this page\" section.\r\n\r\nThe section is shown above and aside.\r\n\r\n\r\n\n\n### Reproduction\n\nSize browser to 1280px\n\n### Expected behavior\n\nThe top \"On this page\" section is hidden while shown aside.\n\n### System Info\n\n```sh\nSystem:\r\n OS: Windows 10 10.0.22621\r\n CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor\r\n Memory: 5.87 GB / 15.95 GB\r\n Binaries:\r\n Node: 18.16.1 - C:\\Program Files\\nodejs\\node.EXE\r\n npm: 9.5.1 - C:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Chrome: 115.0.5790.99\r\n Edge: Spartan (44.22621.1992.0), Chromium (114.0.1823.82)\r\n Internet Explorer: 11.0.22621.1\r\n npmPackages:\r\n vitepress: ^1.0.0-beta.5 => 1.0.0-beta.5\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.",[3196],{"name":3197,"color":3198},"theme","0754FB",2668,"Theme cosmetic issue showing \"On this page\" twice at 1280px breakpoint","2023-07-30T00:04:46Z","https://github.com/vuejs/vitepress/issues/2668",0.6971531,{"description":3205,"labels":3206,"number":3207,"owner":3149,"repository":3150,"state":3160,"title":3208,"updated_at":3209,"url":3210,"score":3211},"### Describe the bug\r\n\r\nWhile auditing another site (which uses vitepress), I noticed the contrast ratio on code languages and line numbers doesn't meet WCAG guidelines.\r\n\r\n\u003Cimg width=\"700\" alt=\"\" src=\"https://github.com/user-attachments/assets/84ef9a18-94b2-41ad-bf0a-42991f01a5cb\" />\r\n\r\n\u003Cimg width=\"700\" alt=\"\" src=\"https://github.com/user-attachments/assets/a0d88f61-9edd-4d28-b60e-a6b8f5d25321\" />\r\n\r\nLooking back to color system PR [#2797](https://github.com/vuejs/vitepress/pull/2797) it seems as though `--vp-c-text-3` was not intended to be used with `--vp-c-bg-alt`\r\n\r\n> XXX-3: The color for solid background, such as bg color of the button. It must satisfy the contrast ratio with pure white (#ffffff) text on top of it\r\n\r\nI have a possible fix available and will submit a PR\r\n\r\n### System Info\r\n\r\n```Text\r\nSystem:\r\n OS: macOS 14.5\r\n CPU: (10) arm64 Apple M1 Max\r\n Memory: 5.63 GB / 32.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Browsers:\r\n Chrome: 131.0.6778.265\r\n Edge: 131.0.2903.112\r\n Safari: 17.5\r\n```\r\n\r\n### Validations\r\n\r\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\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] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[],4486,"Code block contrast ratio","2025-02-23T04:43:36Z","https://github.com/vuejs/vitepress/issues/4486",0.699209,{"description":3213,"labels":3214,"number":3216,"owner":3149,"repository":3150,"state":3160,"title":3217,"updated_at":3218,"url":3219,"score":3220},"### Describe the bug\n\nI want to use the vue component in vitepress. I have read the documentation on the official website, but when I do it, I encounter an error like this.\r\n```bash\r\n[plugin:vite:vue] Tags with side effect (\u003Cscript> and \u003Cstyle>) are ignored in client component templates.\r\n```\r\n\r\nI don't understand what I'm encountering, I just want to achieve the effect here in this vue document\r\n\r\n> https://cn.vuejs.org/guide/reusability/composables.html#vs-react-hooks\r\n\r\n\r\n\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vite-dn63jg?file=docs%2Fhooks%2FuseMouse.js,docs%2Fexample.md\n\n### Expected behavior\n\nThe documentation on the official website makes me understand the difficulty or the need for a better demo?\n\n### System Info\n\n```Text\nSystem:\r\n OS: Windows 11 10.0.22631\r\n CPU: (20) x64 13th Gen Intel(R) CoreT i7-13800H\r\n Memory: 17.07 GB / 31.74 GB\r\n Binaries:\r\n Node: 20.11.0 - ~\\AppData\\Local\\pnpm\\node.EXE\r\n npm: 10.2.4 - ~\\AppData\\Local\\pnpm\\npm.CMD\r\n pnpm: 8.14.1 - ~\\AppData\\Local\\pnpm\\pnpm.EXE\r\n Browsers:\r\n Edge: Chromium (120.0.2210.133)\r\n Internet Explorer: 11.0.22621.1\r\n npmPackages:\r\n vitepress: 1.0.0-rc.39 => 1.0.0-rc.39\n```\n\n\n### Additional context\n\nPlease tell me the correct way to write it, thank you\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.",[3215],{"name":3146,"color":3147},3485,"Using vue to report errors in markdown","2024-01-29T00:04:28Z","https://github.com/vuejs/vitepress/issues/3485",0.7018987,{"description":3222,"labels":3223,"number":3225,"owner":3149,"repository":3150,"state":3160,"title":3226,"updated_at":3227,"url":3228,"score":3229},"### Describe the bug\n\nEven when you set theme.outline = false vitepress still adds class has-aside and therefore content is unnecessary constrained to narrow space\n\n### Reproduction\n\nSet theme.outline to false to hide aside. Even thou it's not displayed it still ocupies space and therefore width of .VPDoc container is the same as with theme.outline\n\n### Expected behavior\n\nWhen aside is hidden it should free up space\n\n### System Info\n\n```shell\nSystem:\r\n OS: Windows 10 10.0.19045\r\n CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz\r\n Memory: 5.57 GB / 15.80 GB\r\n Binaries:\r\n Node: 16.16.0 - C:\\Program Files\\nodejs\\node.EXE\r\n Yarn: 1.22.11 - ~\\AppData\\Roaming\\npm\\yarn.CMD\r\n npm: 9.2.0 - C:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Edge: Spartan (44.19041.1266.0), Chromium (109.0.1518.78)\r\n Internet Explorer: 11.0.19041.1566\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.",[3224],{"name":3197,"color":3198},1915,"support disabling aside in themeConfig","2023-02-20T00:04:34Z","https://github.com/vuejs/vitepress/issues/1915",0.70406944,{"description":3231,"labels":3232,"number":591,"owner":3149,"repository":3150,"state":3160,"title":3234,"updated_at":3235,"url":3236,"score":3237},"\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\nThe SideBar.js and NavBar.js components still reference `__DEV__` and should be replaced with `import.meta.env.DEV` to work with 0.4.0\r\n\r\n**To Reproduce**\r\nUse the default theme with 0.4.0\r\n\r\n**Expected behavior**\r\nNavBar and SideBar should not throw __DEV__ not defined errors\r\n\r\n**System Info**\r\n- vitepress version: 0.4.0\r\n- vite version: v1.0.0-beta.2\r\n- Node version:\r\n- OS version:\r\n\r\n**Additional context**\r\nAdd any other context about the problem here.\r\n",[3233],{"name":3146,"color":3147},"Sidebar Navbar break on 0.4.0","2023-01-21T16:25:39Z","https://github.com/vuejs/vitepress/issues/28",0.7081869,["Reactive",3239],{},["Set"],["ShallowReactive",3242],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fn_IExGYhE2A7b12bNIK4x9iz1vFU8okLdsSOWfd3j64":-1},"/vuejs/vitepress/2505"]