\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.70404065,{"description":2876,"labels":2877,"number":2881,"owner":2868,"repository":2869,"state":2882,"title":2883,"updated_at":2884,"url":2885,"score":2886},"\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\n\r\nindex.md with\r\n\r\n```\r\n\u003Cfoo-bar>\r\nxxx\r\n\u003C/foo-bar>\r\n```\r\nwill throw error\r\n\r\n``` bash\r\n[vite] SFC template compilation error: \r\ndocs/index.md:4:1\r\nElement is missing end tag.\r\n1 | \r\n2 | \u003Ctemplate>\u003Cdiv>\u003Ch1 id=\"test\">\u003Ca class=\"header-anchor\" href=\"#test\" aria-hidden=\"true\">#\u003C/a> test\u003C/h1>\r\n3 | \u003Cfoo-bar>\r\n | ^\r\n4 | \u003Cp>xxx\r\n5 | \u003C/foo-bar>\u003C/p>\r\n\r\ndocs/index.md:5:11\r\nInvalid end tag.\r\n3 | \u003Cfoo-bar>\r\n4 | \u003Cp>xxx\r\n5 | \u003C/foo-bar>\u003C/p>\r\n | ^\r\n6 | \u003C/div>\u003C/template>\r\n```\r\n\r\n**To Reproduce**\r\nSteps to reproduce the behavior:\r\n\r\nclone [my repo](https://github.com/xxholly32/vitepress-playground)\r\n\r\nrun `npm i && npm run docs`\r\n\r\n**Expected behavior**\r\nA clear and concise description of what you expected to happen.\r\n\r\nno error or warning and transform will be correct\r\n\r\n**System Info**\r\n- vitepress version:0.6.0\r\n- vite version:1.0.0-rc.3\r\n- Node version:v12.16\r\n- OS version:10.15\r\n",[2878],{"name":2879,"color":2880},"bug: pending triage","e99695",95,"closed","Multiline vue-components transform error ","2023-01-21T16:24:24Z","https://github.com/vuejs/vitepress/issues/95",0.6885382,{"description":2888,"labels":2889,"number":2891,"owner":2868,"repository":2869,"state":2882,"title":2892,"updated_at":2893,"url":2894,"score":2895},"**Describe the bug**\r\n\r\nWhen using vitepress with vue v3.1, we are now running into a compilation error as some vitepress components are using `\u003Ctemplate functional>`\r\n\r\nThe related change in vue-next is https://github.com/vuejs/vue-next/commit/467076361a730b7925c88c572793c78637e05ca7\r\n\r\n**To Reproduce**\r\n\r\nSee [this PR in VTU](https://github.com/vuejs/vue-test-utils-next/pull/654) (that uses vitepress for the docs) that fails because of vitepress and vue 3.1 \r\n\r\nIt can easily be reproduced in the current codebase by bumping vue to v3.1 and run `yarn docs-build`:\r\n\r\n```\r\nSyntaxError: \u003Ctemplate functional> is no longer supported in Vue 3, since functional components no longer have significant performance difference from stateful ones. Just use a normal \u003Ctemplate> instead.\r\n at /Users/ced-pro/Code/vue/vitepress/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:196:37\r\n at Array.forEach (\u003Canonymous>)\r\n at parse (/Users/ced-pro/Code/vue/vitepress/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:182:18)\r\n at createDescriptor (/Users/ced-pro/Code/vue/vitepress/node_modules/@vitejs/plugin-vue/dist/index.js:4048:62)\r\n at transformMain (/Users/ced-pro/Code/vue/vitepress/node_modules/@vitejs/plugin-vue/dist/index.js:4344:32)\r\n at Object.transform (/Users/ced-pro/Code/vue/vitepress/node_modules/@vitejs/plugin-vue/dist/index.js:4665:16)\r\n at /Users/ced-pro/Code/vue/vitepress/node_modules/rollup/dist/shared/rollup.js:19875:25 {\r\n loc: {\r\n start: { column: 11, line: 1, offset: 10 },\r\n end: { column: 21, line: 1, offset: 20 },\r\n source: 'functional'\r\n },\r\n id: '/Users/ced-pro/Code/vue/vitepress/dist/client/theme-default/com\r\n```\r\n\r\n**Expected behavior**\r\nvitepress should properly compile with Vue v3.1\r\n\r\n**System Info**\r\n- vitepress version: 0.14\r\n- vite version: 2.3.4\r\n- Node version: 14.17\r\n- OS version: macOS\r\n",[2890],{"name":2879,"color":2880},311,"Functional templates errors with vue v3.1","2023-01-21T16:22:22Z","https://github.com/vuejs/vitepress/issues/311",0.6885954,{"description":2897,"labels":2898,"number":2902,"owner":2868,"repository":2869,"state":2882,"title":2903,"updated_at":2904,"url":2905,"score":2906},"### Describe the bug\n\nI referenced a globally registered component in the markdown document of vitepress. When I used it, the error was reported as follows:\r\n**[vitepress] Internal server error: At least one \u003Ctemplate> or \u003Cscript> is required in a single file component.**\r\n\r\n\r\n\n\n### Reproduction\n\nCreate vite.config.js in the vitepress root directory, the content is as follows:\r\n\r\n```\r\nimport { defineConfig } from \"vite\";\r\nimport vueJsx from \"@vitejs/plugin-vue-jsx\";\r\nimport vue from \"@vitejs/plugin-vue\"\r\nexport default defineConfig({\r\n plugins: [\r\n vue(),\r\n vueJsx(),\r\n ],\r\n});\r\n```\n\n### Expected behavior\n\nRender component content correctly\n\n### System Info\n\n```shell\nnode 16\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.dev).\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",2095,"vitepress not support jsx file?","2023-03-29T00:04:14Z","https://github.com/vuejs/vitepress/issues/2095",0.69105303,{"description":2908,"labels":2909,"number":2910,"owner":2868,"repository":2869,"state":2882,"title":2911,"updated_at":2912,"url":2913,"score":2914},"### Is your feature request related to a problem? Please describe.\r\n\r\nI can't add gitlab, reddit, tiktok, twitch to social media section in navigation.\r\n\r\n### Describe the solution you'd like\r\n\r\nsolution #1213\r\n:trollface: \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/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.vuejs.org).\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.",[],1214,"Support gitlab, reddit, tiktok, twitch social media.","2024-11-04T15:32:34Z","https://github.com/vuejs/vitepress/issues/1214",0.695603,{"description":2916,"labels":2917,"number":2921,"owner":2868,"repository":2869,"state":2882,"title":2922,"updated_at":2923,"url":2924,"score":2925},"### Describe the bug\n\nWhen side bar has more than 4 depth nested title, indent is broken.\n\n### Reproduction\n\n.vitepress/config.ts\r\n\r\n```ts\r\nimport { defineConfig, DefaultTheme } from \"vitepress\";\r\n\r\nexport default defineConfig({\r\n title: \"Some document\",\r\n description: \"Just playing around.\",\r\n themeConfig: {\r\n sidebar: {\r\n \"/\": [\r\n {\r\n text: \"1\",\r\n children: [\r\n {\r\n text: \"2\",\r\n children: [\r\n {\r\n text: \"3\",\r\n children: [\r\n {\r\n text: \"4\",\r\n children: [\r\n {\r\n text: \"5\",\r\n children: [\r\n {\r\n text: \"6\",\r\n children: [],\r\n },\r\n ],\r\n },\r\n ],\r\n },\r\n ],\r\n },\r\n ],\r\n },\r\n ],\r\n },\r\n ],\r\n },\r\n },\r\n});\r\n```\r\n\r\nthis produce side bar like bellow.\r\n\r\n\r\n\r\n\n\n### Expected behavior\n\nProduce correct indent.\r\n\r\n\r\n\r\nThe image above is made by changing sub title padding to `0.3rem 1.5rem 0.3rem 5rem` for 5 and `0.3rem 1.5rem 0.3rem 6rem` for 6 with Chrome dev tool.\n\n### System Info\n\n```shell\nSystem:\r\n OS: Windows 10 10.0.22000\r\n CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz\r\n Memory: 16.17 GB / 31.59 GB\r\n Binaries:\r\n Node: 16.12.0 - C:\\Program Files\\nodejs\\node.EXE\r\n npm: 8.1.0 - C:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Chrome: 99.0.4844.51\r\n Edge: Spartan (44.22000.120.0), Chromium (98.0.1108.62)\r\n Internet Explorer: 11.0.22000.120\r\n npmPackages:\r\n vitepress: ^0.22.3 => 0.22.3\n```\n\n\n### Additional context\n\nI know if we use deep nested sub title, the layout is broken in many case, but at least it should be able to choice whether we use it or not I think.\r\nEven if it's not supported officially, if we get it work by adding some script or something, it's welcome😀\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.",[2918],{"name":2919,"color":2920},"theme","0754FB",563,"Deep nested side bar title isn't indented.","2023-01-21T14:26:42Z","https://github.com/vuejs/vitepress/issues/563",0.6963113,{"description":2927,"labels":2928,"number":2930,"owner":2868,"repository":2869,"state":2882,"title":2931,"updated_at":2932,"url":2933,"score":2934},"### Describe the bug\n\nI have a custom Layout.vue to customize the hero page, I want my video tag load different mp4 file based on current theme:\r\n\r\n```vue\r\n\u003Cscript setup>\r\nimport DefaultTheme from \"vitepress/theme\";\r\nimport { withBase, useData } from 'vitepress'\r\nconst { isDark } = useData();\r\nconsole.log(`isDark ${isDark.value}`);\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CDefaultTheme.Layout>\r\n \u003Ctemplate #home-hero-image>\r\n \u003Cvideo autoplay loop muted :src=\"withBase(`/video/${isDark ? 'dark' : 'light'}/x.mp4`)\" class=\"video\" />\r\n \u003C/template>\r\n \u003C/DefaultTheme.Layout>\r\n\u003C/template>\r\n```\r\n\r\nthis works perfect during development, but once I build vitepress and serve, my video is always in light mode, even though isDark is true.\r\n\r\nI found out that during `npm run build`, my Layout template is pre-compiled, so at this point, isDark is always false\r\n\r\nHow can I fix this?\n\n### Reproduction\n\nas above\n\n### Expected behavior\n\nconsist behavior\n\n### System Info\n\n```Text\nSystem:\r\n OS: macOS 13.5.2\r\n CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz\r\n Memory: 191.28 MB / 16.00 GB\r\n Shell: 3.2.57 - /bin/bash\r\n Binaries:\r\n Node: 21.2.0 - /usr/local/bin/node\r\n Yarn: 1.22.10 - /usr/local/bin/yarn\r\n npm: 10.2.3 - /usr/local/bin/npm\r\n Browsers:\r\n Chrome: 119.0.6045.159\r\n Edge: 119.0.2151.72\r\n Safari: 16.6\r\n npmPackages:\r\n vitepress: ^1.0.0-rc.31 => 1.0.0-rc.31\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.",[2929],{"name":2879,"color":2880},3267,"Inconsist behavior between development & production","2023-12-22T00:04:33Z","https://github.com/vuejs/vitepress/issues/3267",0.6979264,{"description":2936,"labels":2937,"number":217,"owner":2868,"repository":2869,"state":2882,"title":2938,"updated_at":2939,"url":2940,"score":2941},"**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",[],"Proper processing of Vue Component slot content","2023-01-21T14:28:50Z","https://github.com/vuejs/vitepress/issues/135",0.6998657,{"description":2943,"labels":2944,"number":2946,"owner":2868,"repository":2869,"state":2882,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### Describe the bug\n\nI'm writing documentation for a component library. Some components have slots.\r\n- When it's a default slot, I fill it by simply placing content in `\u003CComponent> \u003C/Component>`, it works perfectly, and the slotted content renders in the markdown page.\r\n- When it's a named slot, I have to wrap it in `\u003Ctemplate #nameoftheslot> \u003C/template>` as per [Vue slot system](https://vuejs.org/guide/components/slots.html#named-slots), and my content is not rendered. When reading Vitepress documentation, I read that `\u003Ctemplate>` is not to be used in the Markdown page, and though I understand the redundance with Vue SFC templates, we need to be able to used named slots to make these kind of component work...\r\n\r\nDid I miss something or am I trying to do this the wrong way ?\r\nIf not, it would be greatly appreciated to implement named slots in the Markdown pages.\r\n\r\n\n\n### Reproduction\n\n- Use a Vue component in your Markdown page\r\n- This component should have a named slot (eg: `\u003Cslot name=\"header\"> \u003C/slot>`)\r\n- Try to pass content to that slot (eg: `\u003Ctemplate #header> i'm slotted \u003C/template>`)\r\n\r\n=> \"i\"m slotted\" won't be rendered\n\n### Expected behavior\n\nNamed slots should be parsed and rendered correctly, we should see slotted content passed in a named slot\n\n### System Info\n\n```Text\nSystem:\r\n OS: macOS 15.0\r\n CPU: (8) arm64 Apple M2\r\n Memory: 357.16 MB / 24.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 20.10.0 - /usr/local/bin/node\r\n Yarn: 1.22.19 - /opt/homebrew/bin/yarn\r\n npm: 10.2.5 - /usr/local/bin/npm\r\n pnpm: 8.9.2 - /opt/homebrew/bin/pnpm\r\n Browsers:\r\n Safari: 18.0\r\n npmPackages:\r\n vitepress: ^1.3.4 => 1.3.4\n```\n\n\n### Additional context\n\n\u003Cimg width=\"683\" alt=\"Screenshot 2024-09-23 at 11 46 25\" src=\"https://github.com/user-attachments/assets/8989014b-486d-4361-b739-b7bd4b628c55\">\r\n\u003Cimg width=\"604\" alt=\"Screenshot 2024-09-23 at 11 47 34\" src=\"https://github.com/user-attachments/assets/3e32a1c7-02b4-413c-99e4-c9516e6d6409\">\r\n\r\n\r\n\r\nMy carousel has no slide rendered\r\n\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.",[2945],{"name":2900,"color":2901},4223,"Vue named slots don't work in Markdown","2024-10-01T04:45:57Z","https://github.com/vuejs/vitepress/issues/4223",0.700925,{"description":2952,"labels":2953,"number":2954,"owner":2868,"repository":2869,"state":2882,"title":2955,"updated_at":2956,"url":2957,"score":2958},"### Is your feature request related to a problem? Please describe.\r\n\r\nIn order to create good documentation of a standalone Vue component, we want to show many usage examples.\r\n\r\nEvery usage example is a Vue file.\r\n\r\nWe need to be able to import a Vue file in Vitepress, show its source code as CodeBlock.\r\n- Not just a single code block like you can already do in Vitepress, but a Codeblock with tabs on top that split up the source code in `template` / `script` / `style` tabs.\r\n- Also, another tab should say `example` rendering the actual imported Vue component.\r\n\r\n\r\n### Describe the solution you'd like\r\n\r\nThe ideal syntax would look something like this:\r\n```html\r\n\u003CCodeBlockComponent filename=\"blitz-form/Basics - Basic Example\" />\r\n```\r\nAnd here is a video of how it would render in Vitepress:\r\n\r\nhttps://user-images.githubusercontent.com/3253920/140631280-adae2d0b-47d9-4172-b105-f6f4ee5f41f4.mp4\r\n\r\n(I have styled this a little bit to fit my docs style, but of course the styling can be way more bare-bones and we can overwrite the styling with CSS.)\r\n\r\n\r\n\r\n### Describe alternatives you've considered\r\n\r\nI actually already finished this feature for VitePress. I created my custom solution.\r\n\r\nUnder the hood I'm using a combination of these import methods:\r\n```js\r\nimport(`../docs/${filename}.vue`) // for the component\r\n// and\r\nimport(`../docs/${filename}.vue?raw`) // for the source code\r\n```\r\n\r\n~~Everything works when I'm using the VitePress development server. However, as soon as I build and deploy my code to a hosting service, all the Code Blocks break.~~\r\n\r\n~~I searched a lot for solutions, but this is not my strongest point. This past week I tried a bunch of things but still haven't found out how to make it work.~~\r\n\r\n(See next comment, where I explain how I fixed it)\r\n\r\n### Additional context\r\n\r\nI would love to request for an official solution for what I'm trying to do.\r\n\r\nI believe a lot of developers who want to share a Vue component and whip up a quick VitePress documentation about their component, would love this feature.\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.",[],437,"FR: Code Block that renders Vue file component and source code","2023-01-29T00:04:23Z","https://github.com/vuejs/vitepress/issues/437",0.7010718,["Reactive",2960],{},["Set"],["ShallowReactive",2963],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fZqx620Lz7RCnvGHE9cpdzhryfcFo8Mw2JM9uLgG7Grg":-1},"/vuejs/vitepress/519"]