\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.",[2867],{"name":2868,"color":2869},"bug: pending triage","e99695",4764,"vuejs","vitepress","open","Badge component unexpectedly breaks line in tables with long text","2025-05-27T08:28:39Z","https://github.com/vuejs/vitepress/issues/4764",0.7102574,{"description":2879,"labels":2880,"number":2884,"owner":2871,"repository":2872,"state":2873,"title":2885,"updated_at":2886,"url":2887,"score":2888},"### Is your feature request related to a problem? Please describe.\r\n\r\nVitePress' default theme is pretty ace, but right now it's not completely compatible with other CSS frameworks.\r\n\r\nFor example, the `vp-doc` formatting is baked in, and certain component class names are too general so they clash with intentionally-general CSS framework class names such as `menu`.\r\n\r\nIf one was to use VitePress to document an existing CSS framework, it would be difficult, as class names leak in both directions, breaking VitePress theme components and polluting demoed content.\r\n\r\n### Describe the solution you'd like\r\n\r\nThe `without-fonts` entry point goes some way to addressing this, but VitePress could go a little further, for example:\r\n\r\n- a `without-formatting` entry point to skip formatting in `vp-doc`\r\n- renaming general class names like `.menu` (assigned in `VPNavBar`; see `\u003CVPNavBarMenu class=\"menu\" />`)\r\n\r\nI'm currently working on migrating and documenting the excellent Spectre CSS docs and am using Vitepress.\r\n\r\nI'm developing an ejected and modified default theme which has already come some way to solving this problem:\r\n\r\n- [original](https://picturepan2.github.io/spectre/components/menu.html) (custom app)\r\n- [migrated](https://spectre-org.github.io/spectre-docs/docs/components/menu.html) (VitePress with modified default theme)\r\n - note the `vp-doc` formatting which is all Spectre CSS\r\n - some fixed, and some not-yet fixed clashes of general class names\r\n\r\nFor reference to the use case (documenting a 3rd-party framework) here is the raw markdown page:\r\n\r\n- https://raw.githubusercontent.com/spectre-org/spectre-docs/main/docs/components/menu.md\r\n\r\nNote that:\r\n\r\n- Spectre CSS (or any other 3rd-party CSS framework) is now able to be simply \"dropped in\"\r\n- there is no pollution between VitePress and the 3rd-party framework\r\n- VitePress' default components remain fully-styled and work as they were before\r\n- `vp-doc` content can be safely used to demo any 3rd party HTML elements and classes\r\n\r\nI think I know enough to fix the problems in my modified theme and either:\r\n\r\n- publish a new \"neutral\" theme\r\n- port the changes to the default theme (ideal outcome)\r\n\r\nThere's actually not that much work; it's:\r\n\r\n- renaming the general component classes\r\n- moving some `vp-doc` classes to other locations\r\n- creating an additional unstyled entrypoint such as `without-formatting`\r\n\r\n### Describe alternatives you've considered\r\n\r\nPublishing the modified theme standalone, but then of course it would not benefit from ongoing updates.\r\n\r\n### Additional context\r\n\r\nI am proposing a PR in the coming weeks to integrate these updates.\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.dev).\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.",[2881],{"name":2882,"color":2883},"stale","ededed",3021,"Make the default theme compatible with 3rd-party CSS frameworks","2023-11-06T14:43:58Z","https://github.com/vuejs/vitepress/issues/3021",0.71326745,{"description":2890,"labels":2891,"number":2895,"owner":2871,"repository":2872,"state":2896,"title":2897,"updated_at":2898,"url":2899,"score":2900},"### 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.",[2892],{"name":2893,"color":2894},"theme","0754FB",1156,"closed","Badge feature ","2023-01-21T14:22:48Z","https://github.com/vuejs/vitepress/issues/1156",0.66333246,{"description":2902,"labels":2903,"number":2904,"owner":2871,"repository":2872,"state":2896,"title":2905,"updated_at":2906,"url":2907,"score":2908},"\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\nWhen using a custom theme, importing composables like `useRoute` from `\"vitepress\"` in the Layout component also imports the styles for the default theme.\r\n\r\n**To Reproduce**\r\n\r\n1. Follow the [Getting Started guide](https://vitepress.vuejs.org/guide/getting-started.html) to create a new site\r\n2. Create `docs/.vitepress/theme/Layout.vue` with the following contents:\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CContent />\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n// import { useRoute } from \"vitepress\";\r\n// const route = useRoute();\r\n\u003C/script>\r\n```\r\n\r\n3. Create `docs/.vitepress/theme/index.js` with the following contents:\r\n\r\n```js\r\nimport Layout from \"./Layout.vue\";\r\n\r\nexport default {\r\n Layout,\r\n};\r\n```\r\n\r\n4. Run `yarn docs:dev` and open http://localhost:3000. Note the heading doesn't have any styles applied to it:\r\n\r\n\r\n\r\n5. Uncomment the lines in the `\u003Cscript setup>` section in `docs/.vitepress/theme/Layout.vue`. Note the heading now has the default styles applied to it, even though we only imported `useRoute`:\r\n\r\n\r\n\r\n**Expected behavior**\r\nThe heading should remain unstyled since we aren't explicitly importing any styles.\r\n\r\n**System Info**\r\n- vitepress version: v0.9.2\r\n- vite version: v1.0.0-rc.13\r\n- Node version: v12.20.0\r\n- OS version: macOS Catalina 10.15.7\r\n\r\n**Additional context**\r\nI had a quick look at the Vitepress code and it looks like the problem might be to do with this line: https://github.com/vuejs/vitepress/blob/309aa7a8d0e7ab08c1c9db258c74709a66b295cb/src/client/app/exports.ts#L29\r\n\r\nAdding the following to `docs/.vitepress/config.js`:\r\n\r\n```javascript\r\nmodule.exports = {\r\n alias: {\r\n \"/@default-theme/index\": \"/@theme/empty.js\",\r\n },\r\n};\r\n```\r\n\r\n...and creating an empty file `docs/.vitepress/theme/empty.js` prevents the default styles being applied.\r\n",[],182,"Importing default composables also imports default theme's styles","2023-01-21T16:23:59Z","https://github.com/vuejs/vitepress/issues/182",0.6776476,{"description":2910,"labels":2911,"number":2912,"owner":2871,"repository":2872,"state":2896,"title":2913,"updated_at":2914,"url":2915,"score":2916},"Hi there,\r\n\r\nThe example in the documentation for customizing the theme does not work. It fails as the file/package cannot be found. This is the [specific line](https://github.com/vuejs/vitepress/blob/ea6cb00c3e9099d45fc236bff0f7c42a65d558dc/docs/guide/theming.md?plain=1#L97) that I am referring to, but I believe that the other lines that use this same thing will also fail.\r\n\r\nThe specific import that fails\r\n```javascript\r\nimport DefaultTheme from 'vitepress/theme'\r\n```\r\n\r\nI found an alternative import that works by looking into the downloaded node_module folder directly\r\n```javascript\r\nimport DefaultTheme from \"vitepress/dist/client/theme-default\";\r\n```\r\n\r\nIm not sure if this is the intended use or? If this is an actual issue, I can help with making a PR to update the docs, else if it is something that needs to be fixed with the deployment process so that the `DefaultTheme` can be exported from vitepress/theme then it would probably need help from someone else familiar with the process.\r\n\r\nThanks alot for your time!",[],442,"Example provided in theme documentation does not work","2023-01-21T16:20:15Z","https://github.com/vuejs/vitepress/issues/442",0.6851853,{"description":2918,"labels":2919,"number":2920,"owner":2871,"repository":2872,"state":2896,"title":2921,"updated_at":2922,"url":2923,"score":2924},"i want use vitepress become a ui component display website. so i import my sfc in enhanceApp. But at meantime i must config my own `Layout.vue` and `notfound.vue` component. That is not what i want. i liked defaulte theme (vuepress old player) very mush. \r\n\r\n```js\r\nimport Layout from '/@theme/Layout.vue';\r\nimport Helloworld from \"../components/index\"\r\n\r\nexport default {\r\n Layout,\r\n // NotFound,\r\n enhanceApp({ app, router, siteData }) {\r\n app.use(Helloworld) \r\n }\r\n}\r\n```\r\n\r\ni think `@theme/index` should not config default layout and enhanceApp at same time or in the same file. or at least it must follow `Convention over configuration` rule.\r\n\r\nif follow [vuepress default theme file system](https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/theme-default) and `Convention over configuration`, it will be better\r\n\r\nmaybe use `@theme/layouts/`, `@theme/components/`\r\n\r\nand here is a bug, when a create emptyfile `theme` in `.vitepress` .it will crash",[],58,"want more flexibility in the customization part","2023-01-21T16:20:20Z","https://github.com/vuejs/vitepress/issues/58",0.68564904,{"description":2926,"labels":2927,"number":2931,"owner":2871,"repository":2872,"state":2896,"title":2932,"updated_at":2933,"url":2934,"score":2935},"I am looking into porting the using vue in Markdown from vuepress: \r\nhttps://vuepress.vuejs.org/guide/using-vue.html\r\n\r\nIf I understand correctly, vitepress doesn't want to auto register components by convention as Vuepress does. Is this the case? I actually liked this feature, but I understand that vitepress wants to keep the moving parts as small as possible.\r\n\r\nWhat is the recommended way to register the components? I see that in vue-router-next docs they are registered globally inside `enhanceApp`: https://github.com/vuejs/vue-router-next/search?q=HomeSponsors.\r\nSame as with this comment: https://github.com/vuejs/vitepress/issues/92#issuecomment-724645482\r\n\r\nShould we document this way in the docs?\r\n\r\nSome thoughts about this. It would be great that users that want to use the default theme as is, do not need to learn straight away about enhanceApp to be able to use a vue component in their markdown.\r\n\r\nIf auto registering by convention in a folder like `.vitepress/components` is not an option, could we import them directly in the markdown?\r\n\r\n```markdown\r\n# Docs\r\n\r\nThis is a .md using a custom component\r\n\r\n\u003CCustomComponent />\r\n\r\n## More docs\r\n\r\n...\r\n\r\n\u003Cscript setup>\r\n import CustomComponent from '../components/CustomComponent.vue'\r\n\u003C/script>\r\n```\r\n\r\nScript & style hoisting is working in vitepress: https://vuepress.vuejs.org/guide/using-vue.html#script-style-hoisting, but I tried this example to import a Component and it is not at this point.\r\n",[2928],{"name":2929,"color":2930},"docs","0075ca",157,"Recommended way to use Custom Vue components in .md","2023-01-21T16:04:10Z","https://github.com/vuejs/vitepress/issues/157",0.6902692,{"description":2937,"labels":2938,"number":2943,"owner":2871,"repository":2872,"state":2896,"title":2944,"updated_at":2945,"url":2946,"score":2947},"### 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.",[2939,2940],{"name":2893,"color":2894},{"name":2941,"color":2942},"contribution welcome","11E4B8",2765,"Export VPButton + VPSponsors","2023-08-23T00:04:06Z","https://github.com/vuejs/vitepress/issues/2765",0.69249946,{"description":2949,"labels":2950,"number":2952,"owner":2871,"repository":2872,"state":2896,"title":2953,"updated_at":2954,"url":2955,"score":2956},"### Describe the bug\r\n\r\nWhen following the documentation for extending the default theme; importing the theme and exported the extended theme results in the error `TS2708: Cannot use namespace 'DefaultTheme' as a value.`.\r\n\r\n\r\n### Reproduction\r\n\r\nIn a bare VitePress installation:\r\n\r\n`docs/.vitepress/theme/index.ts`\r\n```ts\r\nimport { DefaultTheme } from \"vitepress/theme\";\r\n\r\nexport default {\r\n extends: DefaultTheme\r\n}\r\n```\r\n\r\n`docs/.vitepress/theme/index.ts:4:11: TS2708: Cannot use namespace 'DefaultTheme' as a value.`\r\n\r\n### Expected behavior\r\n\r\nThe documented code would work.\r\n\r\n### System Info\r\n\r\n```sh\r\n System:\r\n OS: Linux 6.1 Manjaro Linux\r\n CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor\r\n Memory: 17.45 GB / 31.30 GB\r\n Container: Yes\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 16.20.0 - ~/.local/bin/node\r\n Yarn: 1.22.19 - ~/.local/bin/yarn\r\n npm: 9.6.5 - ~/.local/bin/npm\r\n Browsers:\r\n Chromium: 114.0.5735.133\r\n npmPackages:\r\n vitepress: ^1.0.0-beta.3 => 1.0.0-beta.3 \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.",[2951],{"name":2868,"color":2869},2532,"Cannot create theme with TypeScript: TS2708: Cannot use namespace 'DefaultTheme' as a value.","2023-06-28T00:04:53Z","https://github.com/vuejs/vitepress/issues/2532",0.6940383,{"description":2958,"labels":2959,"number":2960,"owner":2871,"repository":2872,"state":2896,"title":2961,"updated_at":2962,"url":2963,"score":2964},"### Is your feature request related to a problem? Please describe.\r\n\r\nMake configuration easier.\r\n\r\n### Describe the solution you'd like\r\n\r\nSame as [vite](https://vitejs.dev/config/#config-intellisense) :\r\n\r\n```ts\r\nimport { defineConfig } from 'vitepress'\r\n\r\nexport default defineConfig({\r\n lang: 'en-US',\r\n // ...\r\n}) \r\n``` \r\n\r\nBut we need to improve the support for theme config:\r\n\r\nBy default, `defineConfig` helper leverages the theme config type from default theme:\r\n\r\n```js\r\nimport { defineConfig } from 'vitepress'\r\n\r\nexport default defineConfig({\r\n themeConfig: {\r\n // Type is `DefaultTheme.Config` \r\n }\r\n})\r\n```\r\n\r\nIf you use a custom theme, you'll be able to pass the generics type for your custom theme, and you need overload it with the second parameter of `defineConfig` helper:\r\n\r\n```js\r\nimport { defineConfig } from 'vitepress'\r\nimport { ThemeConfig } from 'your-theme'\r\n\r\nexport default defineConfig\u003CThemeConfig>({\r\n themeConfig: {\r\n // Type is `ThemeConfig` \r\n }\r\n}, true); // declare `usingCustomTheme` and discard usage of the default theme.\r\n```\r\n\r\n\r\n### Describe alternatives you've considered\r\n\r\n_No response_\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/coc)\r\n- [X] Read the [docs](https://vitepress.vuejs.org/).\r\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/master/.github/contributing.md).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[],464,"[Feature Request] Improve TypeScript support for config file.","2023-01-21T16:20:21Z","https://github.com/vuejs/vitepress/issues/464",0.6979643,["Reactive",2966],{},["Set"],["ShallowReactive",2969],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f-s_oNKBt6BK-te8wUDC6F5v7y1wp_WH4JIIGLpz0TEg":-1},"/vuejs/vitepress/3430"]