\n\n### Expected behavior\n\nI hope to use SVG and other methods instead of using masks to display icons, which can avoid frequent redrawing\n\n### System Info\n\n```Text\n\"vitepress\": \"^1.6.4\",\n```\n\n### Additional context\n\n\u003Cimg width=\"2559\" height=\"1042\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/39db5990-f3ee-47bb-8bcf-49272a1918f4\" />\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.",[3156],{"name":3157,"color":3158},"bug: pending triage","e99695",4917,"Bug: Frequent triggering of redrawing of navigation bar icons","2025-08-21T09:14:41Z","https://github.com/vuejs/vitepress/issues/4917",0.7413208,{"description":3165,"labels":3166,"number":3173,"owner":3146,"repository":3147,"state":3148,"title":3174,"updated_at":3175,"url":3176,"score":3177},"### Is your feature request related to a problem? Please describe.\n\nCurrently using vitepress to render changelogs of a repository, and it has entries like:\n`Add \u003Cpartition>/gpu support to fsgen`\n\nwhich leads to missing end tag.\n\n\n\n### Describe the solution you'd like\n\nI believe adding a frontmatter config to parse elements in a MD or not, would be a good idea.\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\nhttps://github.com/vuejs/vitepress/issues/4216\n\nSeems to be stale, and I am not sure if this will be given any attention considering 4 months of inactivity on that issue.\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.",[3167,3170],{"name":3168,"color":3169},"build","377ba8",{"name":3171,"color":3172},"has-workaround","1B4515",4622,"[FR] Frontmatter config to disable \u003C> tags parsing","2025-03-15T10:42:12Z","https://github.com/vuejs/vitepress/issues/4622",0.7487125,{"description":3179,"labels":3180,"number":3185,"owner":3146,"repository":3147,"state":3148,"title":3186,"updated_at":3187,"url":3188,"score":3189},"### Describe the bug\r\n\r\nI'm trying to piece together how to properly create\r\n```html\r\n\u003Cmeta property=\"og:image\" content=\"https://my.page/images/example.png\">\r\n```\r\nand similar.\r\n\r\nI found\r\n- https://github.com/vuejs/vitepress/issues/504 which just points out links need to be absolute\r\n- https://github.com/vuejs/vitepress/issues/551 where a bunch of questions are asked and then just the transformHead API is linked\r\n- the docs for https://vitepress.dev/reference/site-config#transformhead.\r\n\r\nI tried to reference the image from frontmatter;\r\nbut while the direct markdown image reference is resolved and copied out, the frontmatter URL stays the same.\r\n\r\n```yaml\r\n---\r\ntitle: \"Title\"\r\ndescription: \"Desc\"\r\nhead:\r\n - - meta\r\n - name: property=\"og:image\"\r\n content: ./../src/relative/image.jpg\r\n---\r\n\r\n\r\n```\r\n\r\nThe above _should_ in my opinion result in the image being copied over and the path resolved, and then the path could be further transformed in transformHead given some known absolute target URL where the website will end up at.\r\n\r\nI also tried\r\n`content: url(./../src/relative/image.jpg)`\r\nin the hopes that this will trigger vite/vitepress understanding that's a file/url and should be treated as such, but that didn't work either.\r\n\r\n### Reproduction\r\n\r\nIt seems I can't upload images at vitepress.new, so can't add a repro there. I hope above explanation is sufficient.\r\n\r\n### Expected behavior\r\n\r\n1. Ability to reference relative images from frontmatter so they're bundled properly\r\n2. Docs for how to transform them to absolute URLs for use as meta tags\r\n\r\n### System Info\r\n\r\n```sh\r\nSystem:\r\n OS: Windows 10 10.0.22621\r\n CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz\r\n Memory: 32.63 GB / 63.85 GB\r\n Binaries:\r\n Node: 18.13.0 - D:\\Program Files\\nodejs\\node.EXE\r\n Yarn: 1.22.19 - ~\\AppData\\Roaming\\npm\\yarn.CMD\r\n npm: 8.13.2 - D:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Chrome: 113.0.5672.127\r\n Edge: Spartan (44.22621.1702.0), Chromium (113.0.1774.35)\r\n Internet Explorer: 11.0.22621.1\r\n npmPackages:\r\n vitepress: ^1.0.0-beta.1 => 1.0.0-beta.1\r\n```\r\n\r\n\r\n### Additional context\r\n\r\nThere could also be additional processing steps involved on images (e.g. vite imagetools), so I think images referenced from frontmatter should be bundled/processed too.\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.",[3181,3182],{"name":3157,"color":3158},{"name":3183,"color":3184},"stale","ededed",2419,"Frontmatter: images in meta tags aren't resolved/bundled","2023-08-03T10:15:36Z","https://github.com/vuejs/vitepress/issues/2419",0.7513397,{"description":3191,"labels":3192,"number":3193,"owner":3146,"repository":3147,"state":3148,"title":3194,"updated_at":3195,"url":3196,"score":3197},"### Is your feature request related to a problem? Please describe.\n\nVitePress currently outputs unobfuscated class names in the default theme via scoped styles (e.g. `.VPDocAside`). These predictable selectors are easy targets for aggressive adblock filters, which can unintentionally hide more than intended (for example, on [tsx.is](https://tsx.is), sponsor sections or even entire sidebars).\n\nAt the moment, there's no ergonomic way to customize or obfuscate these selectors at the VitePress level. While adblockers serve an important role, I believe VitePress should also empower developers with the option to defend against them if they choose. Providing this flexibility would be a unique value-add for VitePress, and can potentially be an underrated but impactful feature edge.\n\n### Describe the solution you'd like\n\nThe default theme currently uses Vue scoped styles. I recommend migrating it to CSS Modules instead.\n\nVue & Vite already has solid CSS Modules support, so the migration should be straightforward. Using the underlying Vite config, developers can customize class naming.\n\nThis approach gives developers more control without extra complexity, and also helps mitigate the issue of predictable class names being aggressively targeted (e.g. by adblock filters). Personally, I would configure a random hash on each build so that selectors differ on every deploy.\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\nThis would be a breaking change, since the underlying mechanism for CSS scoping would change fundamentally.\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.",[],4920,"Use CSS Modules in default VitePress theme for more flexible class scoping","2025-08-22T09:32:29Z","https://github.com/vuejs/vitepress/issues/4920",0.7545438,{"description":3199,"labels":3200,"number":3207,"owner":3146,"repository":3147,"state":3208,"title":3209,"updated_at":3210,"url":3211,"score":3212},"### Describe the bug\n\n```\n transformHead(context) {\n let description = context.pageData?.frontmatter?.layout === \"home\" ? \"Zezombye's Blog\" : \"Programming, self-improvement, and various stuff\";\n return [\n ['meta', { name: 'description', content: description }],\n ]\n },\n```\n\nAlthough the `\u003Cmeta name=\"description\">` tag is overridden, it doesn't take into account the description, putting instead the default description of \"A VitePress site\":\n\n\n\nThis does work if I put `og:description`, but Discord picks up the `description` tag.\n\n\n\n### Reproduction\n\nIt doesn't seem the build works properly at vitepress.new but by putting the `transformHead` hook and removing the default `description` field in the config, it should reproduce.\n\n### Expected behavior\n\nThe tag should be properly overridden\n\n### System Info\n\n```Text\nSystem:\n OS: Windows 10 10.0.17763\n CPU: (8) x64 AMD Ryzen 5 1500X Quad-Core Processor\n Memory: 12.95 GB / 31.95 GB\n Binaries:\n Node: 22.14.0 - C:\\Program Files\\nodejs\\node.EXE\n npm: 10.9.2 - C:\\Program Files\\nodejs\\npm.CMD\n pnpm: 10.7.0 - ~\\AppData\\Roaming\\npm\\pnpm.CMD\n Browsers:\n Chrome: 138.0.7204.49\n Internet Explorer: 11.0.17763.2989\n npmPackages:\n vitepress: ^1.6.3 => 1.6.3\n```\n\n### Additional context\n\nVitePress should by default put the description on the home page, but the title if on any other page as the meta description\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.",[3201,3204],{"name":3202,"color":3203},"docs","0075ca",{"name":3205,"color":3206},"wont fix","EDEED1",4812,"closed","Cannot override meta description with transformHead","2025-06-26T21:56:52Z","https://github.com/vuejs/vitepress/issues/4812",0.71692944,{"description":3214,"labels":3215,"number":3216,"owner":3146,"repository":3147,"state":3208,"title":3217,"updated_at":3218,"url":3219,"score":3220},"### Is your feature request related to a problem? Please describe.\n\nWe're using Custom Elements to encapsulate styles from our design system, so it'd be great to be able to tell Vitepress to ignore those tags.\r\n\r\nSuper lightweight example:\r\n\r\n```js\r\nclass ButtonExample extends HTMLElement {\r\n connectedCallback() {\r\n const designSystemCSS = '\u003Clink rel=\"stylesheet\" type=\"text/css\" href=\"designSystemURL\" />'\r\n const target = `\u003Cdiv id=\"app\">\u003C/div>`\r\n this.shadow = this.attachShadow({ mode: 'open' })\r\n this.shadow.innerHTML = designSystemCSS + target\r\n createApp(App) // App defined elsewhere ofc\r\n .mount(this.shadow.querySelector('#app'))\r\n }\r\n}\r\n```\n\n### Describe the solution you'd like\n\nProbably just being able to set `compilerOptions.isCustomElement` somewhere would be good enough?\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.",[],735,"Custom element support","2023-01-21T14:34:18Z","https://github.com/vuejs/vitepress/issues/735",0.72447664,{"description":3222,"labels":3223,"number":3224,"owner":3146,"repository":3147,"state":3208,"title":3225,"updated_at":3226,"url":3227,"score":3228},"### Describe the bug\n\nthis is more a question that could lead to a feature request. See the repro below.\n\n### Reproduction\n\nI'd like to override a css style on one page only.\r\n\r\nOn a default vitepress site, duplicate the `index.md` page, to `index2.md`. Then in index add at the bottom:\r\n\r\n```\r\n\u003Cstyle>\r\n .item.grid-6, .item.grid-4, .item.grid-3, .item.grid-2{\r\n width: calc(100% / 1) !important;\r\n }\r\n\u003C/style>\r\n```\r\nThis will make the vpfeatures span across the whole page at any screen size.\r\n\r\nThis works fine on a quick sight, but, when I browse back to `index.md`, also on this page they are page spanned. If I reload the page however there are again 3 features per page span.\r\n\r\nI'd like the style override to be scoped only on page index2. Of course I could duplicate the component, rename it, and change the component style but it sounds like a overkill. I was wondering there must be a more straight forward way to do a page-scoped css override.\r\n\n\n### Expected behavior\n\nStyle to be page scoped.\n\n### System Info\n\n```Text\nAny.\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.",[],3172,"easily override a style on a single page scope","2023-11-14T00:04:42Z","https://github.com/vuejs/vitepress/issues/3172",0.7340428,{"description":3230,"labels":3231,"number":3233,"owner":3146,"repository":3147,"state":3208,"title":3234,"updated_at":3235,"url":3236,"score":3237},"### Is your feature request related to a problem? Please describe.\r\n\r\nI'd like to override `\u003Cmeta name=\"description\">` for each page via `transformHead()`\r\n\r\nhttps://vitepress.dev/reference/site-config#transformhead\r\n\r\nHow it only adds it. So there are 2 `\u003Cmeta description>`s.\r\n\r\n### Describe the solution you'd like\r\n\r\nI'd like to get a chance to remove or override the default `\u003Cmeta description>` for a certain page.\r\n\r\n### Describe alternatives you've considered\r\n\r\nOr having an option to disable the default `\u003Cmeta description>`.\r\n\r\n### Additional context\r\n\r\nReproduction link: https://github.com/Jinjiang/reproductions/tree/vitepress-head-dedupe-20230728\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.",[3232],{"name":3168,"color":3169},2695,"Override/deduplicate meta heads in transformHead()","2023-08-06T00:04:30Z","https://github.com/vuejs/vitepress/issues/2695",0.735546,{"description":3239,"labels":3240,"number":3243,"owner":3146,"repository":3147,"state":3208,"title":3244,"updated_at":3245,"url":3246,"score":3247},"### Describe the bug\n\nI am writing a transformHead function that would automatically generate some meta tags.\r\n\r\nSome meta tags would have content as an URL (e.g. `og:image`).\r\n\r\nSince the content is [escaped](https://github.com/vuejs/vitepress/blob/main/src/node/build/render.ts#L249-L255), it makes it impossible to do so.\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vite-8sef84\r\n\r\nI have added this\r\n```ts\r\n transformHead() {\r\n return [\r\n [\r\n 'meta',\r\n {\r\n name: 'og:image',\r\n content:\r\n 'https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/07/11/11/harold-0.jpg?width=1200&something',\r\n },\r\n ],\r\n ];\r\n },\r\n```\r\n\r\nAnd if you inspect the HTML generated, the meta tag is\r\n\r\n```\r\n\u003Cmeta name=\"og:image\" content=\"https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/07/11/11/harold-0.jpg?width=1200&something\">\r\n```\n\n### Expected behavior\n\nto generate unescaped URLs\r\n\r\n\r\n```diff\r\n-\u003Cmeta name=\"og:image\" content=\"https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/07/11/11/harold-0.jpg?width=1200&something\">\r\n+\u003Cmeta name=\"og:image\" content=\"https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/07/11/11/harold-0.jpg?width=1200&something\">\r\n```\n\n### System Info\n\n```shell\nsuccess Install finished in 1.095s\r\n\r\n\r\n System:\r\n OS: Linux 5.0 undefined\r\n CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz\r\n Memory: 0 Bytes / 0 Bytes\r\n Shell: 1.0 - /bin/jsh\r\n Binaries:\r\n Node: 16.14.2 - /usr/local/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 7.17.0 - /usr/local/bin/npm\r\n npmPackages:\r\n vitepress: latest => 1.0.0-alpha.64\n```\n\n\n### Additional context\n\nI understand that in most cases we would need to escape the value in attributes. But perhaps we can do either of the followings to allow cases like this:\r\n\r\n1. if the value is URL-like, do not escape; or\r\n2. add a `doNotEscape` option to `HeadConfig` to hint the compiler not to escape.\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] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3241,3242],{"name":3157,"color":3158},{"name":3183,"color":3184},2190,"transformHead's content got escaped","2023-09-25T00:04:31Z","https://github.com/vuejs/vitepress/issues/2190",0.73661095,["Reactive",3249],{},["Set"],["ShallowReactive",3252],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fssw4Ao3pPl2jDyLcB6BubBqzSJxP8VTY-z4ZOZ0xIeI":-1},"/vuejs/vitepress/975"]