\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.7104721,{"description":2879,"labels":2880,"number":2881,"owner":2863,"repository":2864,"state":2882,"title":2883,"updated_at":2884,"url":2885,"score":2886},"### Is your feature request related to a problem? Please describe.\n\nNo\n\n### Describe the solution you'd like\n\nThe custom container are a very useful feature and it can be configurable in the .vitepress/config.js file with color for \r\nname,border, border-dark, background, background-dark in the config file with these 5 options i think it will make a better for a better blog points.\n\n### Describe alternatives you've considered\n\nHaving the lack of customization for the custom container boxes. I am aware that you can create components to do the same things but the \"::: name :::\" syntax is better to view in markdown as well as more read able than having it wrapped inside a html tag.\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.",[],1246,"closed","Adding Custom Containers from the config.js file ","2023-01-21T14:26:51Z","https://github.com/vuejs/vitepress/issues/1246",0.6271198,{"description":2888,"labels":2889,"number":2891,"owner":2863,"repository":2864,"state":2882,"title":2892,"updated_at":2893,"url":2894,"score":2895},"### Describe the bug\n\nSince the the theme update in [1.0.0-alpha.37](https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md#100-alpha37-2023-01-17) the text to background contrast ration of [Custom Containers](https://vitepress.vuejs.org/guide/markdown#custom-containers) got worse. The text became much more difficult to read.\r\n\r\nHere's a side-by-side comparison image:\r\n\r\n\r\n\n\n### Reproduction\n\n1. Go to https://vitepress.vuejs.org/guide/markdown#custom-containers\r\n2. Switch to light theme\r\n\n\n### Expected behavior\n\n`--vp-custom-block-*-text` variables on light theme should be either set to `--vp-c-*-dark` or `--vp-c-*-darker` instead of `--vp-c-*`.\r\n\r\nFor Example: \r\n\r\n```css\r\n:root {\r\n --vp-custom-block-warning-text: var(--vp-c-yellow-darker);\r\n}\r\n\r\n.custom-block.warning {\r\n color: var(--vp-custom-block-warning-text);\r\n}\r\n```\n\n### System Info\n\n```shell\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.",[2890],{"name":2857,"color":2858},1824,"Bad contrast for Custom Containers on light theme","2023-03-07T00:04:57Z","https://github.com/vuejs/vitepress/issues/1824",0.6577784,{"description":2897,"labels":2898,"number":2902,"owner":2863,"repository":2864,"state":2882,"title":2903,"updated_at":2904,"url":2905,"score":2906},"### 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.",[2899],{"name":2900,"color":2901},"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.6768291,{"description":2908,"labels":2909,"number":2910,"owner":2863,"repository":2864,"state":2882,"title":2911,"updated_at":2912,"url":2913,"score":2914},"\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.68115383,{"description":2916,"labels":2917,"number":2918,"owner":2863,"repository":2864,"state":2882,"title":2919,"updated_at":2920,"url":2921,"score":2922},"**Is your feature request related to a problem? Please describe.**\r\nCurrently, importing Vue components (whether they are VitePress components, or components from a library for example) are influenced by VitePress's somewhat sub-optimal styles.\r\n\r\nFor example, all headings are styled, so as soon as a component uses an `h1`/`h2`/etc, it will inherit those styles, making VitePress virtually unusable for component libraries that ship their own CSS.\r\n\r\nThe only I can think of mitigating this, is to use a web component as a base for Vue components to be mounted in, as styles are local to web components if I remember correctly.\r\n\r\n**Describe the solution you'd like**\r\nSome way to render components with their own styles, and not inherit styles from the docs.\r\n\r\n**Describe alternatives you've considered**\r\nI tries unsetting all styles `* { all: unset; }` inside our demo component (the wrapper for all other components), but that also removes some of the Tailwind related styling unfortunately.\r\n\r\nI couldn't get web components to work, as the vue plugin seems to be for Vue 2 (https://github.com/vuejs/vue-web-component-wrapper).",[],248,"[Feature] - Allow local styling of components","2023-01-21T16:04:20Z","https://github.com/vuejs/vitepress/issues/248",0.69016594,{"description":2924,"labels":2925,"number":2929,"owner":2863,"repository":2864,"state":2882,"title":2930,"updated_at":2931,"url":2932,"score":2933},"### Describe the bug\n\nwhen I bump vitepress to `1.0.0-rc.26`, I found the styles in `\u003Cstyle>` were not included in the packaged product.\r\n\r\n The style here is normal in the development environment, but it doesn't work after packing.\r\n\r\n``` vue\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"box\">Preview after packing, The text color is expected to be red\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cstyle>\r\n.box {\r\n color: red;\r\n}\r\n\u003C/style>\r\n``` \r\n\r\nI try downgraded to `1.0.0-rc.25`, it was normal.\n\n### Reproduction\n\nreproduction link:\r\n[https://stackblitz.com/edit/vite-xmetfv?file=docs%2FDemo.vue](https://stackblitz.com/edit/vite-xmetfv?file=docs%2FDemo.vue)\r\n\n\n### Expected behavior\n\nPackaged for preview and styles can also take effect\r\n\r\nrelated documents:\r\n[https://vitepress.dev/guide/using-vue#script-and-style](https://vitepress.dev/guide/using-vue#script-and-style)\n\n### System Info\n\n```Text\nSystem:\r\n OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)\r\n CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics\r\n Memory: 6.16 GB / 7.44 GB\r\n Container: Yes\r\n Shell: 5.1.16 - /bin/bash\r\n Binaries:\r\n Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node\r\n Yarn: 1.22.19 - /mnt/c/Program Files/nodejs/yarn\r\n npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm\r\n pnpm: 8.10.5 - ~/.nvm/versions/node/v18.18.2/bin/pnpm\r\n bun: 1.0.12 - ~/.nvm/versions/node/v18.18.2/bin/bun\r\n npmPackages:\r\n vitepress: 1.0.0-rc.26 => 1.0.0-rc.26\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.",[2926],{"name":2927,"color":2928},"build","377ba8",3216,"Using SFC in markdown, styles in the `\u003Cstyle>` tag is not effect.","2023-11-25T00:04:34Z","https://github.com/vuejs/vitepress/issues/3216",0.69126344,{"description":2935,"labels":2936,"number":2938,"owner":2863,"repository":2864,"state":2882,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### Is your feature request related to a problem? Please describe.\n\nwhen i have a vue sfc component, and i have \r\n\u003Ctemplate>\u003Cdiv class=\"$style.myStyle\"/>\r\n\u003Cstyle module>\r\n.my-style { background: blue;}\r\n\u003C/style>\r\n\r\nand i am using the component, it does not render the 'blue' background. if you investigate what $stlye is when you mount the component it has $style={my-style: my-style_fingerprint}\r\n\r\nThis appears to be because i can not set the css.module options on the vite config.\r\n\n\n### Describe the solution you'd like\n\ncould you pass through https://vitejs.dev/config/shared-options.html#css-modules to the vite config. I just need to set the localsConvention to camelcase\n\n### Describe alternatives you've considered\n\ni would have to change my code so that all my references to $style is not camelcase. I have thousands of references to different css classes, so it would be a real pain to get it to work correctly\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.",[2937],{"name":2900,"color":2901},2026,"Pass css.modules to vite app","2023-03-11T00:04:09Z","https://github.com/vuejs/vitepress/issues/2026",0.7075885,{"description":2944,"labels":2945,"number":2947,"owner":2863,"repository":2864,"state":2882,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### Is your feature request related to a problem? Please describe.\n\nI've made a custom `Footer` component, but it doesn't show up very well with a sidebar.\r\nI see a sidebar conditional judgment in the 'VPFooter' component of the default theme.\r\n\r\n\n\n### Describe the solution you'd like\n\nIt would be nice to open it up.\r\n\r\n```\r\nimport { useSidebar } from 'vitepress'\r\n\r\nconst { hasSidebar } = useSidebar()\r\n```\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.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.",[2946],{"name":2857,"color":2858},1176,"Provide useSidebar from vitepress","2023-06-29T00:04:28Z","https://github.com/vuejs/vitepress/issues/1176",0.7081628,["Reactive",2953],{},["Set"],["ShallowReactive",2956],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fyxzhW9zDPxh4AesOZqmkD5oE_9ihSo9T2y-THrPU2E0":-1},"/vuejs/vitepress/1157"]