\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,"vuejs","vitepress","open","Sidenav Components / Skip title update","2025-03-20T12:17:14Z","https://github.com/vuejs/vitepress/issues/4637",0.7092612,{"description":2876,"labels":2877,"number":2881,"owner":2868,"repository":2869,"state":2870,"title":2882,"updated_at":2883,"url":2884,"score":2885},"### Is your feature request related to a problem? Please describe.\r\n\r\nvitepress is currently not capable enough for developing component libraries. While it is fast, it lacks something. We may be able to incorporate support for component capabilities similar to `dumi` to help developers quickly develop Vue component libraries docs.\r\n\r\n```html\r\n\u003Cdemo src=\"../demo.vue\" title=\"Demo block\" desc=\"use demo\" />\r\n```\r\n\r\nAlternatively, use the `desc` defined in the `container` to write Markdown syntax.\r\n\r\n```md\r\n::: demo src=\"../demo.vue\" title=\"Demo block\"\r\n\r\nThis is a `description` that can be written using Markdown.\r\n\r\n:::\r\n```\r\n\r\n### Describe the solution you'd like\r\n\r\nTo address this, I have created the [markdown-it-vitepress-demo](https://github.com/hairyf/markdown-it-vitepress-demo) plugin. I'm not sure if it can be helpful.\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- https://github.com/vuejs/vitepress/issues/987\r\n- https://github.com/vuejs/vitepress/issues/1349\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.",[2878],{"name":2879,"color":2880},"stale","ededed",2432,"feat(demo): built-in markdown plugin provides support for showcasing demo capabilities.","2024-07-17T14:37:26Z","https://github.com/vuejs/vitepress/issues/2432",0.71859664,{"description":2887,"labels":2888,"number":217,"owner":2868,"repository":2869,"state":2889,"title":2890,"updated_at":2891,"url":2892,"score":2893},"**Describe the bug/feature**\r\n\r\nIn both **Vitepress** and **Vuepress** the way in which the Markdown-it rule `htmlBlock` is implemented is highly subpar. This is particularly true because the primary use-case for both is documentation but currently adding in a VueJS component which takes advantage of slot content tends to break rather quickly. This is because -- by default web-components are considered _inline_ components by Markdown (as per the spec). When Markdown encounters inline components it treats the interior scope of the web-component as Markdown content and therefore tends to wreck havoc on slot content.\r\n\r\nLooking at the `src/node/markdown/plugins/component.ts` file you can start to see the problem when looking at the `HTML_SEQUENCES` symbol (some lines removed for brevity):\r\n\r\n```ts\r\n// An array of opening and corresponding closing sequences for html tags,\r\n// last argument defines whether it can terminate a paragraph or not\r\nconst HTML_SEQUENCES: [RegExp, RegExp, boolean][] = [\r\n // PascalCase Components\r\n [/^\u003C[A-Z]/, />/, true],\r\n // custom elements with hyphens\r\n [/^\u003C\\w+\\-/, />/, true],\r\n]\r\n```\r\n\r\nThe intent here is to mark the opening and closing of scope for a component but as you can see from the RegEx it is only looking for inline components not block components!\r\n\r\nFor example, the component `p-table` has several named slots which help it to render the way the user intends:\r\n\r\n```html\r\n\u003Cp-table>\r\n \r\n \u003Ctemplate #name=\"{ row }\">\r\n {{ row.name }}\r\n \u003C/template>\r\n\r\n \u003Ctemplate #age=\"{ row }\">\r\n {{ row.age }}\r\n \u003C/template>\r\n\r\n\u003C/p-table>\r\n```\r\n\r\nPut this into the template section of a Vue CLI app and it works just fine. Put it into Vuepress or Vitepress and watch the cloud of smoke start to rise as it fumbles around; particularly failing on the `#` symbols used as shorthand for named slots. This is particularly troublesome for a documentation site that is trying to document a set of VueJS components! There should be a way to ensure that this VueJS component's interior scope is left untouched by **Markdown-it** ... at least when that's what you want. \r\n\r\nThere is a second use-case that I would expect Vitepress to just handle and that is _kind of_ what it's doing today but in a hit and miss fashion currently. Let's say that I just have a default slot in my component and therefore I want my component to be seen by the Markdown engine as being an \"inline\" component and process the interior as markdown. Great, then the following should work:\r\n\r\n```md\r\n\u003Csuper-sexy>\r\n# some heading\r\n## some sub heading\r\n\u003C/super-sexy>\r\n```\r\n\r\nThis would just provide some HTML wrapper elements that would in this case make this very dull markdown sexy.\r\n\r\nFinally there is a third use-case that really should be considered required too ... this is the hybrid but it will allow for all sorts of simple but useful documentation components. The use-case presents as a component that exposes named slots -- and therefore is seen by Markdown as a block component -- but these named slots _are_ processed by markdown. An obvious example might be a `\u003Ctwo-columns>` component which provides a `left` and `right` slot and allows authors to more readily leverage their horizontal space.\r\n\r\nImagine the following:\r\n\r\n```html\r\n\u003Ctwo-columns>\r\n\r\n \u003Ctemplate #left>\r\n I'm a lumberjack and I'm ok\r\n \u003C/template>\r\n \u003Ctemplate #right>\r\n I sleep all night and I work all day\r\n \u003C/template>\r\n\r\n\u003C/two-columns>\r\n```\r\n \r\nThis will fail miserably today but it _could_ be grand!\r\n\r\n** Proposed Solution **\r\n\r\nRework the `src/node/markdown/plugins/components.ts` file in Vitepress (same change can be applied to Vuepress) to:\r\n\r\n- use more sophisticated RegEx patterns to actually capture BLOCK content not just inline components\r\n- support two modes of processing for BLOCK VueJS components: \r\n\r\n 1. Isolated - the interior scope is _not_ processed as markdown and all registered VueJS components can operate exactly like they would normally do\r\n 2. Parsed - the interior scope is processed as markdown; this will work well for default slots where the interior content is Markdown content\r\n\r\n- the Isolated mode should be seen as the _default_ as it is more powerful and allows components that work outside the context of Vitepress/Vuepress to just work here as well\r\n- the parsed mode may be popular for components designed strictly for Vitepress and Vuepress and it could be opted into in the HTML template like so:\r\n\r\n ```html\r\n \u003Cmy-crazy-idea parsed>There I was, _there I was_, in the Congo\u003C/my-crazy-idea>\r\n ```\r\n\r\nThis solution so far could pretty easily support the first two use cases which is a big step forward. The third use-case would certainly be nice but would need a bit more thought. I could imagine something as simple as adding the `md` prop to the parent component being used as a means to pass in the Markdownit object into the top-level component so it could chain the rendering into the various named slots:\r\n\r\n ```html\r\n \u003Cmy-crazy-idea md>\r\n \u003Ctemplate #left>\r\n There I was, _there I was_, \r\n \u003Ctemplate #right>\r\n I sleep all night and I work all day\r\n \u003C/template>\r\n \u003C/my-crazy-idea>\r\n ```\r\n\r\nIn all likelihood this last option should be done as an optional second step.\r\n",[],"closed","Proper processing of Vue Component slot content","2023-01-21T14:28:50Z","https://github.com/vuejs/vitepress/issues/135",0.617756,{"description":2895,"labels":2896,"number":2900,"owner":2868,"repository":2869,"state":2889,"title":2901,"updated_at":2902,"url":2903,"score":2904},"### Describe the bug\n\nI want to use the vue component in vitepress. I have read the documentation on the official website, but when I do it, I encounter an error like this.\r\n```bash\r\n[plugin:vite:vue] Tags with side effect (\u003Cscript> and \u003Cstyle>) are ignored in client component templates.\r\n```\r\n\r\nI don't understand what I'm encountering, I just want to achieve the effect here in this vue document\r\n\r\n> https://cn.vuejs.org/guide/reusability/composables.html#vs-react-hooks\r\n\r\n\r\n\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vite-dn63jg?file=docs%2Fhooks%2FuseMouse.js,docs%2Fexample.md\n\n### Expected behavior\n\nThe documentation on the official website makes me understand the difficulty or the need for a better demo?\n\n### System Info\n\n```Text\nSystem:\r\n OS: Windows 11 10.0.22631\r\n CPU: (20) x64 13th Gen Intel(R) CoreT i7-13800H\r\n Memory: 17.07 GB / 31.74 GB\r\n Binaries:\r\n Node: 20.11.0 - ~\\AppData\\Local\\pnpm\\node.EXE\r\n npm: 10.2.4 - ~\\AppData\\Local\\pnpm\\npm.CMD\r\n pnpm: 8.14.1 - ~\\AppData\\Local\\pnpm\\pnpm.EXE\r\n Browsers:\r\n Edge: Chromium (120.0.2210.133)\r\n Internet Explorer: 11.0.22621.1\r\n npmPackages:\r\n vitepress: 1.0.0-rc.39 => 1.0.0-rc.39\n```\n\n\n### Additional context\n\nPlease tell me the correct way to write it, thank you\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.",[2897],{"name":2898,"color":2899},"bug: pending triage","e99695",3485,"Using vue to report errors in markdown","2024-01-29T00:04:28Z","https://github.com/vuejs/vitepress/issues/3485",0.68908894,{"description":2906,"labels":2907,"number":2908,"owner":2868,"repository":2869,"state":2889,"title":2909,"updated_at":2910,"url":2911,"score":2912},"I'm new to vue and vitepress so I'm a little confused.\r\n\r\nI'm looking into adding markdown to my existing vue app. The way I imagined it would be some markdown element which would take the markdown text and render it. I'm also interested in embedding vue components inside the markdown. Something like\r\n```\r\n\u003CMarkdown>\r\n## abc\r\nefg\r\n### hij\r\nHi {{name}},\r\n\u003C/Markdown>\r\n```\r\nI was hoping vitepress would do it, but it seems like vitepress sets everything up as a standalone app. I can't simply add vitepress to my package.json and start using it's elements.\r\n\r\nAny examples of using vitepress in an existing vue as a library? Or any alternative?",[],315,"Use vitepress in an existing vue app","2023-01-21T16:22:21Z","https://github.com/vuejs/vitepress/issues/315",0.69304395,{"description":2914,"labels":2915,"number":2919,"owner":2868,"repository":2869,"state":2889,"title":2920,"updated_at":2921,"url":2922,"score":2923},"### Describe the bug\r\n\r\nSome of the code markdown extensions do not work when the language is `vue`.\r\n\r\nIn particular, `[!code ++]`, `[!code --]`, `[!code warning]`, `[!code error]` and `[!code focus]` just show the comments at the end of the line.\r\n\r\nChanging the language to something else fixes this, e.g. `htmx` or `ts`.\r\n\r\nThis only seems to happen in the template tags of a `vue` code block. The highlighting works absolutely fine in the script part. Please see reproduction for code examples, I can't figure out how to escape the triple backtick code blocks here! ☹️ \r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/vite-arupmh?file=docs%2Fexample.md\r\n\r\n### Expected behavior\r\n\r\nThe markdown extensions should work correctly and highlight the lines as per [the docs](https://vitepress.dev/guide/markdown#focus-in-code-blocks).\r\n\r\n### System Info\r\n\r\n```Text\r\nSystem:\r\n OS: macOS 14.1.2\r\n CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz\r\n Memory: 488.47 MB / 16.00 GB\r\n Shell: 5.9 - /bin/zsh\r\nBinaries:\r\n Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node\r\n Yarn: 1.22.10 - /usr/local/bin/yarn\r\n npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm\r\nBrowsers:\r\n Chrome: 120.0.6099.234\r\n Firefox: 112.0.2\r\n Firefox Developer Edition: 107.0\r\n Safari: 17.1.2\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.",[2916],{"name":2917,"color":2918},"upstream","BF29ED",3503,"Markdown code extensions don't work in some situations","2025-02-01T04:42:47Z","https://github.com/vuejs/vitepress/issues/3503",0.70438033,{"description":2925,"labels":2926,"number":2930,"owner":2868,"repository":2869,"state":2889,"title":2931,"updated_at":2932,"url":2933,"score":2934},"### Is your feature request related to a problem? Please describe.\n\nWhen we want add a common footer section for every page, we have to add other code with \"Content component\". \r\nFor example:\r\n\r\n``` vue\r\n\u003Cdiv class='doc-content-wrapper'>\r\n \u003Cdiv class='doc-content-container'>\r\n \u003CContent\r\n ref='content'\r\n class='doc-content'\r\n @vnode-mounted='updateLink'\r\n @vnode-updated='updateLink'\r\n />\r\n \u003Cdiv class='doc-content'>\r\n \u003CVPComponentCssVar v-if='componentName'\r\n :component-name='componentName'>\u003C/VPComponentCssVar>\r\n \u003C/div>\r\n \u003CVPPageFooter />\r\n \u003CVPPageNav />\r\n \u003C/div>\r\n \u003C/div>\r\n```\n\n### Describe the solution you'd like\n\nAdd a footer and header slot to Content component.\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/coc)\n- [X] Read the [docs](https://vitepress.vuejs.org/).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/master/.github/contributing.md).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2927],{"name":2928,"color":2929},"need more info","bdbefc",543,"Please add slots for Content component.","2023-01-21T16:04:18Z","https://github.com/vuejs/vitepress/issues/543",0.7046056,{"description":2936,"labels":2937,"number":2938,"owner":2868,"repository":2869,"state":2889,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### Is your feature request related to a problem? Please describe.\n\nI'm using VitePress to document our coding standards and our design system. I want to show examples of the code we would use (HTML and Vue components) *and* how that code would render.\r\n\r\nI can import and use Vue components in the markdown (and HTML) without issue. But to show both the \"live\" and \"source\" views of that code, I have to copy my live code into a separate markdown code block, which means now I have *two* blocks of code to manage and synchronize for each example.\n\n### Describe the solution you'd like\n\nI'd like a new directive for \"```\" code blocks that, when viewed in VitePress, shows up as a tabbed interface with two tabs: (1) the rendered version of that code (using the normal rendering done by VitePress, supporting Vue and HTML), and (2) the normal way the code block would be otherwise rendered.\r\n\r\nI *believe* this would simply require detecting this directive, duplicating the code within the block as non-fenced code, and wrapping the pair in a simple tabbed Vue component.\r\n\r\nObviously for more complex examples, the VitePress version of the live code will differ from what needs to be shown to the user, so that is a challenge (the Vue docs themselves have this challenge). But for simple examples of using Vue components and HTML with no additional script involved, it would really help.\r\n\r\nMy suggestion would be something like \"```html:live\", where the \":live\" bit either comes before or after any row number highlights (I don't think it would matter).\n\n### Describe alternatives you've considered\n\nCopying and pasting between markdown code blocks to markdown live code, keeping them synchronized as the code is updated.\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.",[],554,"\"Live\" Code Blocks","2023-01-21T14:20:27Z","https://github.com/vuejs/vitepress/issues/554",0.7095915,{"description":2944,"labels":2945,"number":2946,"owner":2868,"repository":2869,"state":2889,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### Is your feature request related to a problem? Please describe.\r\n\r\nI would like to replace sections in the default theme with my own components and sections for the home page. For example I want to replace the `VPHomeFeatures` with my own features component and not rely on the vitepress `VPHomeFeatures` component. The slots `vp-home-feature-before` and `vp-home-feature-after` are not sufficient, because I want to replace the actual component itself.\r\n\r\nSection from from `src/client/theme-default/components/VPHome.vue` where the feature component is defined in the theme:\r\n```\r\n \u003Cslot name=\"home-features-before\" />\r\n \u003CVPHomeFeatures />\r\n \u003Cslot name=\"home-features-after\" />\r\n```\r\n\r\n### Describe the solution you'd like\r\n\r\nA simple solution is to introduce more slots in the default theme such that a developer can replace components on the home page with his own custom components.\r\n\r\nI think we should introduce at least two new slots:\r\n- `home-features`\r\n- `home-hero`\r\n\r\nThe improved section from `src/client/theme-default/components/VPHome.vue` would simply be:\r\n```\r\n \u003Cslot name=\"home-features-before\" />\r\n \u003Cslot name=\"home-features\" />\r\n \u003CVPHomeFeatures />\r\n \u003C/slot>\r\n \u003Cslot name=\"home-features-after\" />\r\n```\r\n\r\n\r\n\r\n### Describe alternatives you've considered\r\n\r\nThe alternative is to tell vite to replace the `VPHome.vue` component (or Features component for that matter) with a custom `VPHome.vue` component using aliases in the configuration, e.g.:\r\n\r\n```\r\nvite: {\r\n resolve: {\r\n alias: [\r\n {\r\n find: /^.*\\/VPHome\\.vue$/,\r\n replacement: fileURLToPath(\r\n new URL('./theme/components/VPHome.vue', import.meta.url),\r\n ),\r\n },\r\n ],\r\n },\r\n },\r\n```\r\n\r\n### Additional context\r\n\r\nIf this is something the maintainers want to consider, I can prepare a quick MR for this feature asap after approval.\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.",[],3558,"More slots in the default theme to replace components completely","2024-02-15T00:05:28Z","https://github.com/vuejs/vitepress/issues/3558",0.7101576,{"description":2952,"labels":2953,"number":2957,"owner":2868,"repository":2869,"state":2889,"title":2958,"updated_at":2959,"url":2960,"score":2961},"### Describe the bug\n\nGreetings:\r\n\r\nI'm building a `story` for a custom element, imported in the `config.js` file as global component. \r\n\r\nWhen I nest the component more than **twice**, I get the `template` content rendered as plain text. Is as if vue is not picking it up to render the actually template, but instead using it as plain text content.\r\n\r\nSo, picture a component who's `\u003Ctemplate>` simply renders a `\u003Cdiv class=\"spacer\">\u003Cslot />\u003C/div>`. If I would style said `div` with a `padding: 8px`, it is expected that by nesting it 3 levels deep, I would end up with 3 div html elements, each pushing its child `8px` in. \r\n\r\nThe result is basically:\r\n\r\n```html\r\n\u003Cdiv class=\"spacer\">\r\n \u003Cdiv class=\"spacer\">\r\n \u003Cdiv class=\"spacer\">\u003Cslot />\u003C/div>\r\n \u003C/div>\r\n\u003C/div>\r\n```\r\n\r\n> **notice** how on line 5, I get back the actual, non-compiled template.\r\n\r\n\n\n### Reproduction\n\n- create a custom component, say a \u003CTest> component with a `\u003Cslot />`\r\n- import it to vitepress\r\n- write a `md` story and nest the component three times:\r\n\r\n```md\r\n\u003Ctest>\r\n \u003Ctest>\u003C/test>\r\n \u003Ctest>\r\n \u003Ctest>I get rendered as text, even if I contain an HTML element, such as a `\u003Cbutton>`\u003C/test>\r\n \u003C/test>\r\n\u003C/test>\r\n```\n\n### Expected behavior\n\ntemplate compiler should keep going through deeper levels of components and render them as HTML elements.\n\n### System Info\n\n```shell\nSystem:\r\n OS: macOS 12.2\r\n CPU: (8) arm64 Apple M1\r\n Memory: 119.95 MB / 16.00 GB\r\n Shell: 5.8 - /bin/zsh\r\n Binaries:\r\n Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node\r\n Yarn: 1.22.17 - /opt/homebrew/bin/yarn\r\n npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm\r\n Browsers:\r\n Chrome: 97.0.4692.99\r\n Safari: 15.3\r\n npmPackages:\r\n vitepress: ^0.21.6 => 0.21.6\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/coc)\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.",[2954],{"name":2955,"color":2956},"build","377ba8",519,"nested templates not being compiled","2023-01-21T14:32:54Z","https://github.com/vuejs/vitepress/issues/519",0.7109775,["Reactive",2963],{},["Set"],["ShallowReactive",2966],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$ftcVNmbJ5-HsvVSvgCkfOBD8jKiUlHtzZeuR-LW8P2CE":-1},"/vuejs/vitepress/4223"]