\r\n title: Feature A\r\n details: Lorem ipsum dolor sit amet, consectetur adipiscing elit\r\n```\r\n\r\nCheck the feature icon type\r\n```ts\r\ntype FeatureIcon =\r\n | string\r\n | { src: string; alt?: string; width?: string; height: string }\r\n | {\r\n light: string\r\n dark: string\r\n alt?: string\r\n width?: string\r\n height: string\r\n }\r\n```\r\n\r\nI refer to the render logic, use `v-html` render the icon.\r\nDisplay well in `dev` environment, but shows errors in `prod` environment.\r\n\r\n| dev | build |\r\n| ----------- | ----------- |\r\n|  |  |\r\n\r\n\r\n\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/github/zyyv/vitepress-unocss-issue\r\n\r\n- Display right run `pnpm dev`\r\n- Display error run `pnpm build && pnpm preview`\r\n\r\n### Expected behavior\r\n\r\nDev and build behave the same\r\n\r\n### System Info\r\n\r\n```Text\r\nlatest\r\n```\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\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.",[2852,2855,2858],{"name":2853,"color":2854},"build","377ba8",{"name":2856,"color":2857},"has-workaround","1B4515",{"name":2859,"color":2860},"stale","ededed",4045,"vuejs","vitepress","open","SSR in dev for more consistent output in dev and prod","2025-03-02T18:08:58Z","https://github.com/vuejs/vitepress/issues/4045",0.74578196,{"description":2870,"labels":2871,"number":2875,"owner":2862,"repository":2863,"state":2876,"title":2877,"updated_at":2878,"url":2879,"score":2880},"### Describe the bug\r\n\r\nThe `\u003CContent />` component wraps the code with a \"position: relative\" styled div. \r\n\r\n\u003Cimg width=\"656\" alt=\"Screenshot 2023-07-30 at 9 43 37 PM\" src=\"https://github.com/vuejs/vitepress/assets/90354202/a7f83520-edc3-415d-b851-2487693e1ba9\">\r\n\r\n\r\n### Reproduction\r\n\r\nThe \u003CContent /> component wraps the code with a \"position: relative\" styled div. \r\n\r\n### Expected behavior\r\n\r\nThere is no documentation on how to disable that from happening and it shouldn't do that in the first place anyway. \r\n\r\n### System Info\r\n\r\n```sh\r\nv1.0.0-beta.7\r\n```\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\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.",[2872],{"name":2873,"color":2874},"bug: pending triage","e99695",2712,"closed","The \u003CContent /> component wraps the code with a \"position: relative\" styled div.","2023-08-11T00:04:38Z","https://github.com/vuejs/vitepress/issues/2712",0.6827904,{"description":2882,"labels":2883,"number":236,"owner":2862,"repository":2863,"state":2876,"title":2887,"updated_at":2888,"url":2889,"score":2890},"### Is your feature request related to a problem? Please describe.\n\nhttps://v2.vuepress.vuejs.org/reference/default-theme/components.html\r\n\r\nthis component comes handy when presenting something with a distinct label, say, a version. Please please have it in vitepress.\r\n\u003Cimg width=\"291\" alt=\"Screenshot 2022-08-11 at 3 35 48 PM\" src=\"https://user-images.githubusercontent.com/1858427/184085656-67b87e05-ec0f-4b9b-ade3-0395a0f9e275.png\">\r\n\r\n\n\n### Describe the solution you'd like\n\nto have a built-in badge feature\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.",[2884],{"name":2885,"color":2886},"theme","0754FB","Badge feature ","2023-01-21T14:22:48Z","https://github.com/vuejs/vitepress/issues/1156",0.6874775,{"description":2892,"labels":2893,"number":2894,"owner":2862,"repository":2863,"state":2876,"title":2895,"updated_at":2896,"url":2897,"score":2898},"### Describe the bug\n\n\ni created a component with the following content\n```vue\n\u003Ctemplate>\n\u003Cspan>{{ name }}\u003C/span>\n\u003C/template>\n```\nwhen I use it after the title, the value of `name` will appear in the directory\n\n\n\nhow can I write it so that it acts like the \"Badge\" component and doesn't appear in the catalog?\n\n### Reproduction\n\n\u003Cimg width=\"397\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b639d4bd-5f1f-42a8-b3f6-86e619cae028\" />\n\n\u003Cimg width=\"998\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3f185339-dd13-443e-adb3-481337331a37\" />\n\nthis will not happen when using the Badge component:\n\n\u003Cimg width=\"467\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/dea1d53a-ec19-4142-a736-fc0b571e3d76\" />\n\n\u003Cimg width=\"1183\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/6916abdb-7106-4cb0-8e7d-27625a189287\" />\n\n\n\nexample: https://stackblitz.com/edit/vite-odjkgdaj\n\n### Expected behavior\n\nshould be like the `Badge` component\n\n### System Info\n\n```Text\nnone\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.",[],4761,"directories should not read the contents of components","2025-05-25T17:54:49Z","https://github.com/vuejs/vitepress/issues/4761",0.6961521,{"description":2900,"labels":2901,"number":2903,"owner":2862,"repository":2863,"state":2876,"title":2904,"updated_at":2905,"url":2906,"score":2907},"### Describe the bug\n\n```\r\n[Vue warn]: Failed to resolve component: Badge\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. \r\n```\n\n### Reproduction\n\nNA\n\n### Expected behavior\n\nNA\n\n### System Info\n\n```shell\nNA\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.",[2902],{"name":2873,"color":2874},1576,"Badge component does not work","2023-01-21T14:20:53Z","https://github.com/vuejs/vitepress/issues/1576",0.70958036,{"description":2909,"labels":2910,"number":2912,"owner":2862,"repository":2863,"state":2876,"title":2913,"updated_at":2914,"url":2915,"score":2916},"### Describe the bug\n\nHover state on link in `.vp-doc` is always matched, seems `:hover` is being truncated.\r\n\r\n\r\nCopy button in code block is also messed up.\r\n\r\n\r\n\r\nTable style messed up as well.\r\n\r\nI guess there's a lot more...\n\n### Reproduction\n\nIn `config.ts`:\r\n```ts\r\nexport default defineConfig({\r\n vite: {\r\n css: {\r\n postcss: {\r\n plugins: [\r\n postcssIsolateStyles({\r\n includeFiles: [/vp-doc\\.css/]\r\n }),\r\n ],\r\n },\r\n }\r\n})\r\n```\r\n\r\nI would write one if required, but since my above example is pretty easy to reproduce, I'll leave it blank here.\n\n### Expected behavior\n\nStyle not messed up\r\n\r\n (NOTE: it's working properly if I use `postcss-prefix-selector` straight away instead of using the one from vitepress package)\n\n### System Info\n\n```sh\nSystem:\r\n OS: Windows 10 10.0.19045\r\n CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900K @ 3.50GHz\r\n Memory: 38.35 GB / 63.84 GB\r\n Binaries:\r\n Node: 18.16.0 - C:\\NodeJS\\node.EXE\r\n Yarn: 1.22.19 - C:\\NodeJS\\yarn.CMD\r\n npm: 9.8.1 - C:\\NodeJS\\npm.CMD\r\n pnpm: 8.7.0 - C:\\NodeJS\\pnpm.CMD\r\n Browsers:\r\n Edge: Spartan (44.19041.1266.0), Chromium (116.0.1938.62)\r\n Internet Explorer: 11.0.19041.1566\r\n npmPackages:\r\n vitepress: ^1.0.0-rc.9 => 1.0.0-rc.9\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.",[2911],{"name":2873,"color":2874},2868,"`postcssIsolateStyles` mess up original styles","2023-09-05T00:04:08Z","https://github.com/vuejs/vitepress/issues/2868",0.7141204,{"description":2918,"labels":2919,"number":2920,"owner":2862,"repository":2863,"state":2876,"title":2921,"updated_at":2922,"url":2923,"score":2924},"### Describe the bug\n\n\r\n\r\nMy component style is the red box on the left, and the blue box on the right is the default of vitepress, which causes the style of my component to be overwritten. How can I configure the table style without using vitepress and use the style of my component?\r\n\r\n我的组件样式是左侧红框的,右侧蓝框是 vitepress 默认的,导致覆盖了我组件的样式,我怎么才能配置不使用 vitepress 的 table 样式,用我组件的样式\n\n### Reproduction\n\nNone\n\n### Expected behavior\n\nNone\n\n### System Info\n\n```Text\nNone\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.",[],4309,"How to disable all styles for a .vp-doc table","2024-11-04T04:43:46Z","https://github.com/vuejs/vitepress/issues/4309",0.7194233,{"description":2926,"labels":2927,"number":2928,"owner":2862,"repository":2863,"state":2876,"title":2929,"updated_at":2930,"url":2931,"score":2932},"### Describe the bug\n\ncontent 部分没有 overflow:hidden 导致很长的滚动条(也有可能是我的图片太大?)\r\n\r\n[github here](https://github.com/Mt-Youya/DeepLearning-500-questions)\r\n\r\n[site here](https://deeplearning-500-questions.pages.dev/zh-cn/ch02_%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%9F%BA%E7%A1%80/%E7%AC%AC%E4%BA%8C%E7%AB%A0_%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%9F%BA%E7%A1%80.html)\n\n### Reproduction\n\n我fork 别人的仓库,不是我自己写的, 它原本用的是 docsify 我想提个pr用vitepress 试试,然后就出现了这个bug\n\n### Expected behavior\n\n没有滚动条\n\n### System Info\n\n```Text\nVersion 122.0.6261.112 (Official Build) (64-bit)\r\nwin11\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.",[],3644,"CSS bug","2024-03-19T00:07:30Z","https://github.com/vuejs/vitepress/issues/3644",0.72344035,{"description":2934,"labels":2935,"number":2937,"owner":2862,"repository":2863,"state":2876,"title":2938,"updated_at":2939,"url":2940,"score":2941},"### Describe the bug\n\nA recent update (https://github.com/vuejs/vitepress/pull/1064) added a `word-break: break-word` style to all HTML elements. This leads to unpleasant results such as this in table cells (see the first and last column):\r\n\r\n\u003Cimg width=\"724\" alt=\"Table after\" src=\"https://user-images.githubusercontent.com/243601/192322921-5ab4d6a1-00e3-48d4-af11-c39c8c3e0265.png\">\r\n\r\nWhile before this update the result was much more readable:\r\n\r\n\u003Cimg width=\"729\" alt=\"Table before\" src=\"https://user-images.githubusercontent.com/243601/192323027-c7ffff4a-5989-497d-9aa0-b50b4c3cf216.png\">\r\n\n\n### Reproduction\n\nStackBlitz reproduction with a table:\r\nhttps://stackblitz.com/edit/vitepress-theme-word-break-issue?file=index.md\n\n### Expected behavior\n\nRisky styles such as `word-break: break-word` should not be applied to all elements.\r\n\r\nHandling overflowing content (if any) should be done at the component level, probably with specific solutions for each component.\n\n### System Info\n\n```shell\nSystem:\r\n OS: macOS 12.6\r\n CPU: (8) arm64 Apple M1\r\n Memory: 117.00 MB / 8.00 GB\r\n Shell: 3.5.1 - /opt/homebrew/bin/fish\r\n Binaries:\r\n Node: 16.17.1 - /opt/homebrew/opt/node@16/bin/node\r\n Yarn: 1.22.19 - /opt/homebrew/bin/yarn\r\n npm: 8.19.1 - /Volumes/Pieces/.npm/bin/npm\r\n Browsers:\r\n Chrome: 105.0.5195.125\r\n Firefox Nightly: 107.0a1\r\n Safari: 16.0\r\n npmPackages:\r\n vitepress: ^1.0.0-alpha.16 => 1.0.0-alpha.16\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.",[2936],{"name":2885,"color":2886},1402,"Consider rolling back the global `word-break: break-word` style","2023-01-21T14:25:23Z","https://github.com/vuejs/vitepress/issues/1402",0.72373784,{"description":2943,"labels":2944,"number":2948,"owner":2862,"repository":2863,"state":2876,"title":2949,"updated_at":2950,"url":2951,"score":2952},"### Describe the bug\n\nIf i use backticks (`) within a table in Markdown, it can cause issues with the rendering of the table.\r\n\r\n\r\n\r\nMy Real markdown is \r\n\r\n\r\n\r\n\n\n### Reproduction\n\n[1.0.0-rc.36](https://github.com/vuejs/vitepress/compare/v1.0.0-rc.35...v1.0.0-rc.36) (2024-1-8)\n\n### Expected behavior\n\nHopefully this issue will be resolved soon\n\n### System Info\n\n```Text\n❯ npx envinfo --system --npmPackages vitepress --binaries --browsers\r\nNeed to install the following packages:\r\nenvinfo@7.11.0\r\nOk to proceed? (y)\r\n\r\n System:\r\n OS: Windows 11 10.0.22631\r\n CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor\r\n Memory: 60.85 GB / 95.92 GB\r\n Binaries:\r\n Node: 20.9.0 - ~\\AppData\\Local\\Volta\\tools\\image\\node\\20.9.0\\node.EXE\r\n npm: 10.2.5 - ~\\AppData\\Local\\Volta\\tools\\image\\npm\\10.2.5\\bin\\npm.CMD\r\n pnpm: 8.10.5 - C:\\Program Files\\Volta\\pnpm.EXE\r\n Browsers:\r\n Edge: Chromium (120.0.2210.121)\r\n Internet Explorer: 11.0.22621.1\r\n npmPackages:\r\n vitepress: ^1.0.0-rc.36 => 1.0.0-rc.36\n```\n\n\n### Additional context\n\nno\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.",[2945],{"name":2946,"color":2947},"need more info","bdbefc",3438,"If i use backticks (`) within a table in Markdown, it can cause issues with the rendering of the table.","2024-01-20T00:04:39Z","https://github.com/vuejs/vitepress/issues/3438",0.72375613,["Reactive",2954],{},["Set"],["ShallowReactive",2957],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f2quaZQlxYuHRYGMqp1Mq7V558oUzSXdsCZHVhUeYF9w":-1},"/vuejs/vitepress/4764"]