\n\n### Reproduction\n\nnone\n\n### Expected behavior\n\nThe text inside the Badge component should not wrap and should remain on the same line to avoid disrupting the table layout.\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.",[2870],{"name":2871,"color":2872},"bug: pending triage","e99695",4764,"Badge component unexpectedly breaks line in tables with long text","2025-05-27T08:28:39Z","https://github.com/vuejs/vitepress/issues/4764",0.70050174,{"description":2879,"labels":2880,"number":2881,"owner":2860,"repository":2861,"state":2862,"title":2882,"updated_at":2883,"url":2884,"score":2885},"### Is your feature request related to a problem? Please describe.\n\nWhen using Vue templates, the Markdown renderer processes them correctly and compiles them. However, in the title, sidenav, and local search (path), the Vue templates are not rendered and are displayed as raw templates.\n\n\u003Cimg width=\"537\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/db835d1f-1084-41c9-bf1c-aa329f4609eb\" />\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.725069,{"description":2887,"labels":2888,"number":2892,"owner":2860,"repository":2861,"state":2893,"title":2894,"updated_at":2895,"url":2896,"score":2897},"### 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.",[2889],{"name":2890,"color":2891},"theme","0754FB",1156,"closed","Badge feature ","2023-01-21T14:22:48Z","https://github.com/vuejs/vitepress/issues/1156",0.6659621,{"description":2899,"labels":2900,"number":2901,"owner":2860,"repository":2861,"state":2893,"title":2902,"updated_at":2903,"url":2904,"score":2905},"### 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.6743079,{"description":2907,"labels":2908,"number":2912,"owner":2860,"repository":2861,"state":2893,"title":2913,"updated_at":2914,"url":2915,"score":2916},"### Is your feature request related to a problem? Please describe.\n\nI want to use `Badge` component in my custom theme. And the `Badge` component not exportd by `vitepress/theme`\r\n\r\nSo I can do this only:\r\n```ts\r\nimport Theme from 'vitepress/theme'\r\n\r\nexport default {\r\n\t...Theme,\r\n\tenhanceApp(ctx) {\r\n\t \tTheme.enhanceApp(ctx)\r\n\t\t// Custom content\r\n\t}\r\n}\r\n```\n\n### Describe the solution you'd like\n\nSo I' d like to import `Badge` from `vitepress/theme` directly\r\n\r\n```ts\r\nimport { Badge } from 'vitepress/theme'\r\n\r\nexport default {\r\n\t...Theme,\r\n\tenhanceApp(ctx) {\r\n\t \tctx.app.component('Badge', VPBadge);\r\n\t\t// Custom content\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.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.",[2909],{"name":2910,"color":2911},"contribution welcome","11E4B8",3430,"Export `Badge` component for custom Theme","2024-01-18T00:04:42Z","https://github.com/vuejs/vitepress/issues/3430",0.6945138,{"description":2918,"labels":2919,"number":2921,"owner":2860,"repository":2861,"state":2893,"title":2922,"updated_at":2923,"url":2924,"score":2925},"### Describe the bug\n\nAfter adding formkit to your vitepress project you get hydration errors\n\n### Reproduction\n\n1. Add formkit:\r\n```\r\nnpm install @formkit/vue\r\n````\r\n2. Set it up:\r\n```js\r\n// .vitepress/theme/index.js\r\nimport DefaultTheme from \"vitepress/theme\";\r\nimport \"./custom.scss\";\r\nimport { plugin, defaultConfig } from \"@formkit/vue\";\r\n\r\nexport default {\r\n\t...DefaultTheme,\r\n\tenhanceApp({ app }) {\r\n\t\t// formkit\r\n\t\tapp.use(\r\n\t\t\tplugin,\r\n\t\t\tdefaultConfig({\r\n\t\t\t\ttheme: \"genesis\",\r\n\t\t\t})\r\n\t\t);\r\n\t},\r\n};\r\n```\r\n3. build your project:\r\n```\r\nnpm run docs:build\r\n```\r\n\r\nYou don't even have to use formkit anywhere to get \"Hydration completed but contains mismatches\" error. However, error is not about formkit as you might expect, as formkit works correctly. So far the only components I've seen being broken by adding formkit seems to be Badge component as it doesn't show up. Removing formkt from .vitepress/theme/index.js restores badges.\r\n\n\n### Expected behavior\n\nNo hydration error after adding formkit and using badges\n\n### System Info\n\n```shell\nNeed to install the following packages:\r\n envinfo@7.8.1\r\nOk to proceed? (y) \r\n System:\r\n OS: Windows 10 10.0.19044\r\n CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz\r\n Memory: 5.26 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.1.3 - C:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.46)\r\n Internet Explorer: 11.0.19041.1566\r\n npmPackages:\r\n vitepress: ^1.0.0-alpha.29 => 1.0.0-alpha.32\n```\n\n\n### Additional context\n\nContrary to envinfo report tested in Firefox 108.0.1 \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.vuejs.org).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2920],{"name":2871,"color":2872},1711,"Hydration completed but contains mismatches after adding formkit. Breaks Badges","2023-01-21T14:17:09Z","https://github.com/vuejs/vitepress/issues/1711",0.70874447,{"description":2927,"labels":2928,"number":2930,"owner":2860,"repository":2861,"state":2893,"title":2931,"updated_at":2932,"url":2933,"score":2934},"### Describe the bug\n\nIt's an fixed Engish title. \n\n### Reproduction\n\nN/A\n\n### Expected behavior\n\nAllow custom title or translation.\n\n### System Info\n\n```shell\nN/A\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.",[2929],{"name":2871,"color":2872},719,"[Default Theme] VPDocAsideOutline: Allow custom title for 'On this page'","2023-01-21T14:35:36Z","https://github.com/vuejs/vitepress/issues/719",0.71436954,{"description":2936,"labels":2937,"number":2940,"owner":2860,"repository":2861,"state":2893,"title":2941,"updated_at":2942,"url":2943,"score":2944},"### Describe the bug\r\n\r\nI packed the naive ui component and when I use the npm package, because I use style.css and document inject package,To avoid build errors , I config enhanceApp: \r\n\r\n```ts\r\nimport naive from 'naive-ui'\r\nexport default {\r\n ...DefaultTheme,\r\n enhanceApp({ app }) {\r\n app.use(naive)\r\n app.mixin({\r\n mounted() {\r\n import('wmt-ui').then(function(m) {\r\n app.use(m.default)\r\n })\r\n },\r\n })\r\n }\r\n}\r\n```\r\n\r\n### Reproduction\r\n\r\nnpm run docs: dev OK\r\nnpm run docs: build OK\r\n\r\nBut I refresh the page, the third component did not recognized \r\n\r\n### Expected behavior\r\n\r\nAfter refresh, the third component recognized \r\n\r\n### System Info\r\n\r\n```shell\r\n\"system\": windows\r\n\"npm\" : \"8.5.0\"\r\n\"vitepress\": \"^1.0.0-alpha.4\",\r\n\"vue\": \"^3.2.33\"\r\n\"browser\": \"chrome\"\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] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\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.",[2938,2939],{"name":2871,"color":2872},{"name":2857,"color":2858},1564,"when I use the npm package, F5 refresh, the component not recognized ","2023-08-12T00:04:35Z","https://github.com/vuejs/vitepress/issues/1564",0.71462154,{"description":2946,"labels":2947,"number":2949,"owner":2860,"repository":2861,"state":2893,"title":2950,"updated_at":2951,"url":2952,"score":2953},"### Describe the bug\n\n1. 组件中 style scoped 使用了 bootstrap,某些 class 样式出不来,比如下面 `rounded`;\r\n\r\n\r\n2. 如果在 vue 组件的 script 导入 bootstrap,则会影响默认主题的样式,比如下面标题\r\n\r\n\r\n3. 不管是使用 slots 还是使用全局注册组件,都是一样的问题;\n\n### Reproduction\n\n默认主题结合 bootstrap 很容易重现。\n\n### Expected behavior\n\n我希望在 vitepress 的组件中使用 bootstrap 快速开发。\n\n### System Info\n\n```sh\nSystem:\r\n OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)\r\n CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz\r\n Memory: 4.30 GB / 7.72 GB\r\n Container: Yes\r\n Shell: 5.1.16 - /bin/bash\r\n Binaries:\r\n Node: 19.5.0 - ~/.nvm/versions/node/v19.5.0/bin/node\r\n npm: 9.6.4 - ~/.nvm/versions/node/v19.5.0/bin/npm\r\n pnpm: 8.6.9 - ~/.local/share/pnpm/pnpm\r\n npmPackages:\r\n vitepress: 1.0.0-beta.6 => 1.0.0-beta.6\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.",[2948],{"name":2890,"color":2891},2683,"默认主题添加组件使用 bootstrap 样式没有预期","2023-08-18T00:04:15Z","https://github.com/vuejs/vitepress/issues/2683",0.71614987,["Reactive",2955],{},["Set"],["ShallowReactive",2958],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fetscw6SNBEASa96qWa1n3T_PHp7RqnDM8OiTjs_DkQ0":-1},"/vuejs/vitepress/1576"]