`)\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.",[3020],{"name":3021,"color":3022},"stale","ededed",3021,"vuejs","vitepress","open","Make the default theme compatible with 3rd-party CSS frameworks","2023-11-06T14:43:58Z","https://github.com/vuejs/vitepress/issues/3021",0.71838576,{"description":3032,"labels":3033,"number":3041,"owner":3024,"repository":3025,"state":3026,"title":3042,"updated_at":3043,"url":3044,"score":3045},"### Describe the bug\r\n\r\nUsage:\r\n```yaml\r\nfeatures:\r\n - icon: \u003Ci class=\"i-carbon-sun\" />\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.",[3034,3037,3040],{"name":3035,"color":3036},"build","377ba8",{"name":3038,"color":3039},"has-workaround","1B4515",{"name":3021,"color":3022},4045,"SSR in dev for more consistent output in dev and prod","2025-03-02T18:08:58Z","https://github.com/vuejs/vitepress/issues/4045",0.73336315,{"description":3047,"labels":3048,"number":3049,"owner":3024,"repository":3025,"state":3050,"title":3051,"updated_at":3052,"url":3053,"score":3054},"\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,"closed","Importing default composables also imports default theme's styles","2023-01-21T16:23:59Z","https://github.com/vuejs/vitepress/issues/182",0.6859358,{"description":3056,"labels":3057,"number":3061,"owner":3024,"repository":3025,"state":3050,"title":3062,"updated_at":3063,"url":3064,"score":3065},"### 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.",[3058],{"name":3059,"color":3060},"contribution welcome","11E4B8",3430,"Export `Badge` component for custom Theme","2024-01-18T00:04:42Z","https://github.com/vuejs/vitepress/issues/3430",0.68879056,{"description":3067,"labels":3068,"number":3072,"owner":3024,"repository":3025,"state":3050,"title":3073,"updated_at":3074,"url":3075,"score":3076},"### Describe the bug\n\nThe button in the navigation for switching languages is not accessible for screen reader users.\r\n\r\n\r\n\r\nReviewing the HTML code reveals that property `aria-label` is not provided for the `button` element:\r\n\r\n```html\r\n\u003Cdiv class=\"VPFlyout VPNavBarTranslations translations\">\r\n \u003Cbutton type=\"button\" class=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n \u003Cspan class=\"text\">\r\n \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" class=\"option-icon\" >\r\n \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" class=\"text-icon\">\r\n \u003C/span>\r\n \u003C/button>\r\n \u003Cdiv class=\"menu\">\r\n \u003Cdiv class=\"VPMenu\">\r\n \u003Cdiv class=\"items\">\r\n \u003Cp class=\"title\">Deutsch\u003C/p>\r\n \u003Cdiv class=\"VPMenuLink\">\r\n \u003Ca class=\"VPLink link\" href=\"...\">English\u003C/a>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/div>\r\n```\r\n\r\nAs far as I can tell, the reason for the missing `aria-label` property seems to be the missing `label` property for component `VPFlyout.vue` in the `VPNavBarTranslations.vue` component.\r\n\r\n```html\r\n\u003C!-- src/client/theme-default/components/VPNavBarTranslations.vue -->\r\n\u003Ctemplate>\r\n \u003CVPFlyout\r\n v-if=\"localeLinks.length && currentLang.label\"\r\n class=\"VPNavBarTranslations\"\r\n :icon=\"VPIconLanguages\"\r\n >\r\n \u003Cdiv class=\"items\">\r\n \u003Cp class=\"title\">{{ currentLang.label }}\u003C/p>\r\n\r\n \u003Ctemplate v-for=\"locale in localeLinks\" :key=\"locale.link\">\r\n \u003CVPMenuLink :item=\"locale\" />\r\n \u003C/template>\r\n \u003C/div>\r\n \u003C/VPFlyout>\r\n\u003C/template>\r\n```\r\n\r\nI'm planning to provide a PR for this issue, if you agree. But I might need some guidance in how to provide the changes properly.\r\n\r\nIt seems like setting property `label` for component `VPFlyout` should resolve the issue. However, this value should be configurable for different locales IMO.\r\n\n\n### Reproduction\n\nConfigure vitepress for 2 locales at least to enable the \"Switch Language\" button in the navbar. Using a screen reader, the button is not announced properly (e.g. \"popup button collapse\").\n\n### Expected behavior\n\nThe `aria-label` property of the `button` element of `VPFlyout` in `VPNavBarTranslations` should be set.\r\n\r\n```html\r\n\u003C!-- src/client/theme-default/components/VPNavBarTranslations.vue -->\r\n\u003Ctemplate>\r\n \u003CVPFlyout\r\n v-if=\"localeLinks.length && currentLang.label\"\r\n class=\"VPNavBarTranslations\"\r\n :icon=\"VPIconLanguages\"\r\n :label=\"Switch Language\"\r\n >\r\n \u003Cdiv class=\"items\">\r\n \u003Cp class=\"title\">{{ currentLang.label }}\u003C/p>\r\n\r\n \u003Ctemplate v-for=\"locale in localeLinks\" :key=\"locale.link\">\r\n \u003CVPMenuLink :item=\"locale\" />\r\n \u003C/template>\r\n \u003C/div>\r\n \u003C/VPFlyout>\r\n\u003C/template>\r\n```\r\n\r\nor\r\n\r\n```html\r\n\u003C!-- src/client/theme-default/components/VPNavBarTranslations.vue -->\r\n\u003Ctemplate>\r\n \u003CVPFlyout\r\n v-if=\"localeLinks.length && currentLang.label\"\r\n class=\"VPNavBarTranslations\"\r\n :icon=\"VPIconLanguages\"\r\n :label=\"currentLang.languageButtonAriaLabel\"\r\n >\r\n \u003Cdiv class=\"items\">\r\n \u003Cp class=\"title\">{{ currentLang.label }}\u003C/p>\r\n\r\n \u003Ctemplate v-for=\"locale in localeLinks\" :key=\"locale.link\">\r\n \u003CVPMenuLink :item=\"locale\" />\r\n \u003C/template>\r\n \u003C/div>\r\n \u003C/VPFlyout>\r\n\u003C/template>\r\n```\r\n\r\nRelevant HTML code should look like this:\r\n\r\n```html\r\n\u003Cdiv class=\"VPFlyout VPNavBarTranslations translations\">\r\n \u003Cbutton type=\"button\" class=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\" aria-label=\"Switch Language\">\r\n \u003Cspan class=\"text\">\r\n \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" class=\"option-icon\" >\r\n \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" class=\"text-icon\">\r\n \u003C/span>\r\n \u003C/button>\r\n \u003Cdiv class=\"menu\">\r\n \u003Cdiv class=\"VPMenu\">\r\n \u003Cdiv class=\"items\">\r\n \u003Cp class=\"title\">Deutsch\u003C/p>\r\n \u003Cdiv class=\"VPMenuLink\">\r\n \u003Ca class=\"VPLink link\" href=\"...\">English\u003C/a>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/div>\r\n```\n\n### System Info\n\n```shell\nSystem:\r\n OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)\r\n CPU: (8) x64 Intel(R) Xeon(R) CPU E3-1505M v5 @ 2.80GHz\r\n Memory: 22.58 GB / 31.13 GB\r\n Container: Yes\r\n Shell: 5.0.17 - /bin/bash\r\n Binaries:\r\n Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node\r\n Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.0/bin/yarn\r\n npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm\r\n Browsers:\r\n Chrome: 110.0.5481.177\r\n Chromium: 110.0.5481.177\r\n Firefox: 110.0.1\n```\n\n\n### Additional context\n\nFollowing website explains the accessibility issue and possible solution in detail: https://dequeuniversity.com/rules/axe/4.4/button-name\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.",[3069],{"name":3070,"color":3071},"theme","0754FB",2021,"'Switch Language' Button does not have an accessible name","2023-03-16T00:04:26Z","https://github.com/vuejs/vitepress/issues/2021",0.70484746,{"description":3078,"labels":3079,"number":3080,"owner":3024,"repository":3025,"state":3050,"title":3081,"updated_at":3082,"url":3083,"score":3084},"### Is your feature request related to a problem? Please describe.\r\n\r\nI'd like to implement a download button for code snippets, which downloads the file that was imported as a code snippet. This new button would be a a download button that downloads the code snippet directly, rather than just copying to clipboard. It would live alongside the existing copy button.\r\n\r\n### Describe the solution you'd like\r\n\r\nSome way to customize the `prewrapper` plugin as needed. Perhaps by disabling it completely in the `markdown-it` settings so that I can add my own custom prewrapper plugin that doesn't conflict with the existing one. \r\n\r\nOr perhaps a better option is to make the code snippet feature of the markdown-it config output a Vue component called `\u003CCodeSnippet>` or similar, which can then be defined in the theme itself. This way users can define their own SFC for the code snippet, in order to add new features, customize styling, etc.\r\n\r\nEither way I'd like to have some way to decouple the core functionality of importing a code block and highlighting it, from the functionality for decorating that code block with a surrounding wrapper element.\r\n\r\n### Describe alternatives you've considered\r\n\r\nImplementing my own custom component from scratch for displaying code snippets. This seems challenging though as I will have to reimplement snippets, highlighting, and importing snippets from files on disk. I would ideally like to build on top of the existing functionality, by wrapping the existing shiki highlighted, imported code block in my own custom component which provides the copy button, a download button, and any other buttons that I may wish to add.\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.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.",[],2129,"Download button for code snippets","2023-04-01T00:04:20Z","https://github.com/vuejs/vitepress/issues/2129",0.70859087,{"description":3086,"labels":3087,"number":3088,"owner":3024,"repository":3025,"state":3050,"title":3089,"updated_at":3090,"url":3091,"score":3092},"### Is your feature request related to a problem? Please describe.\n\nWhen adding Vue components or HTML markup inside a `doc` or `page` markdown file, it's frustrating to have to contend with the global `.vp-doc` styles.\n\n### Describe the solution you'd like\n\nIt would be very nice to have a `.not-vp-doc` class to negate and opt out of the global `.vp-doc` styles (for the element where you apply `.not-vp-doc` and all descendants) similar to the `.prose` and `.not-prose` classes used by [@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography).\n\n### Describe alternatives you've considered\n\nI started creating my own override `vp-doc.css` stylesheet, but maintaining it and also getting it imported instead of the default one requires too much duplication files of the default theme.\n\nI also considered mechanisms to opt out of the `.vp-doc` styles at the theme level in `Layout.vue` but it really doesn't solve the problem - the opt-out needs to be able to happen on a specific fragment or component when embedded inside an `.md` file that otherwise consists primarily of markdown content.\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.",[],4731,"Default theme: Add class to opt out of .vp-doc styles","2025-05-04T08:39:09Z","https://github.com/vuejs/vitepress/issues/4731",0.7095886,{"description":3094,"labels":3095,"number":3096,"owner":3024,"repository":3025,"state":3050,"title":3097,"updated_at":3098,"url":3099,"score":3100},"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.71221954,{"description":3102,"labels":3103,"number":3104,"owner":3024,"repository":3025,"state":3050,"title":3105,"updated_at":3106,"url":3107,"score":3108},"### Is your feature request related to a problem? Please describe.\n\nNoticing that there is a distinct difference from vue press custom containers to that of vite's\r\n\r\n## vue press\r\n\u003Cimg width=\"784\" alt=\"Screenshot 2022-08-11 at 3 38 20 PM\" src=\"https://user-images.githubusercontent.com/1858427/184088154-0c171530-b416-4fab-96a9-4f587e8220dc.png\">\r\n\r\n\r\n## vite press\r\n\u003Cimg width=\"734\" alt=\"Screenshot 2022-08-11 at 3 38 30 PM\" src=\"https://user-images.githubusercontent.com/1858427/184088178-03b9564b-e9b9-4ba6-a197-f64c3249a923.png\">\r\n\r\n\n\n### Describe the solution you'd like\n\nI know that the color can be overridden in https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css\r\n\r\nbut, the for the style difference for this line \r\n\u003Cimg width=\"76\" alt=\"Screenshot 2022-08-11 at 3 53 52 PM\" src=\"https://user-images.githubusercontent.com/1858427/184088784-33fdfeaf-115e-47bc-b43d-be355ef67f7d.png\">\r\n\r\nis it possible to expose an option to be configured, like\r\n```\r\nthemeConfig : {\r\n logo: xxx,\r\n customContainer: {\r\n withLeftBorder: true,\r\n cornerRadius: \"6px\"\r\n }\r\n}\r\n```\r\n\r\nEffect:\r\n\u003Cimg width=\"223\" alt=\"Screenshot 2022-08-11 at 4 03 14 PM\" src=\"https://user-images.githubusercontent.com/1858427/184090149-ca7ddd87-d574-4a4a-8704-d594588f7f3c.png\">\r\n\r\n\n\n### Describe alternatives you've considered\n\nAlternatively,\r\nthese two properties can be exposed in css variables: https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css\r\n\r\nsomething like: \r\n```\r\n//add corner radius\r\n--vp-custom-block-border-radius: 6px;\r\n//remove border, add lable left border\r\n--vp-custom-block-info-border: none;\r\n--vp-custom-block-info-left-border: var(--vp-c-green-darker);\r\n--vp-custom-block-info-left-border-width: 5px \r\n\r\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] 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.",[],1157,"custom containers style option","2023-01-21T14:28:46Z","https://github.com/vuejs/vitepress/issues/1157",0.7129329,{"description":3110,"labels":3111,"number":3115,"owner":3024,"repository":3025,"state":3050,"title":3116,"updated_at":3117,"url":3118,"score":3119},"### 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.",[3112],{"name":3113,"color":3114},"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.71503973,["Reactive",3121],{},["Set"],["ShallowReactive",3124],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fBse3dl9_S7kyK-fJw7ZTuXfRQeBpPACLRhZIyuFAu_o":-1},"/vuejs/vitepress/2765"]