\r\n\r\n## More docs\r\n\r\n...\r\n\r\n\u003Cscript setup>\r\n import CustomComponent from '../components/CustomComponent.vue'\r\n\u003C/script>\r\n```\r\n\r\nScript & style hoisting is working in vitepress: https://vuepress.vuejs.org/guide/using-vue.html#script-style-hoisting, but I tried this example to import a Component and it is not at this point.\r\n",[2894],{"name":2895,"color":2896},"docs","0075ca",157,"Recommended way to use Custom Vue components in .md","2023-01-21T16:04:10Z","https://github.com/vuejs/vitepress/issues/157",0.6616499,{"description":2903,"labels":2904,"number":2905,"owner":2856,"repository":2857,"state":2867,"title":2906,"updated_at":2907,"url":2908,"score":2909},"### 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.67077553,{"description":2911,"labels":2912,"number":2913,"owner":2856,"repository":2857,"state":2867,"title":2914,"updated_at":2915,"url":2916,"score":2917},"### Is your feature request related to a problem? Please describe.\n\nI have a lot of md files (10K+) that want to serve with vitepress, which contains something made vitepress unhappy (e.g. un closed tags, or `{{ xxx }}`), all I want to do is simply serve them as html pages, without any vue-parsing stuff, but vitepress keep complain about the those things while building. There're too many files for me to fix them one by one, it's nearly impossible.\n\n### Describe the solution you'd like\n\nprovide an option to completely op-out the vue related processing stuff, just parse and display markdowns\n\n### Describe alternatives you've considered\n\nother alternatives are also welcome as long as it solved this kind of problem.\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.",[],3452,"Can we provide an option to completely op-out the vue related processing stuff?","2024-01-25T00:04:47Z","https://github.com/vuejs/vitepress/issues/3452",0.6804358,{"description":2919,"labels":2920,"number":2921,"owner":2856,"repository":2857,"state":2867,"title":2922,"updated_at":2923,"url":2924,"score":2925},"### Is your feature request related to a problem? Please describe.\n\nBefore, I want to use the third-party component library [element-plus](https://element-plus.gitee.io/#/zh-CN) in vuepress, which can be directly in [clientAppEnhance.ts](https://v2.vuepress.vuejs.org/zh/reference/client-api.html#%E8%BF%9B%E9%98%B6%E8%83%BD%E5%8A%9B) folder for app Use(). The code is as follows:\r\n\r\n```js\r\nimport { defineClientAppEnhance } from '@vuepress/client'\r\n\r\nimport elementPlus from 'element-pus'\r\n\r\nexport default defineClientAppEnhance(({ app, router, siteData }) => {\r\n app.use(elementPlus)\r\n})\r\n```\r\n\r\nSo how do I use third-party libraries in vitepress?\n\n### Describe the solution you'd like\n\nI hope to supplement the detailed configuration of the [document](https://vitepress.vuejs.org/). Now the content of the document configuration of vitepress is too few, and it is difficult for novices to get started with vitepress\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.",[],603,"How to use third-party libraries?","2023-01-21T14:28:45Z","https://github.com/vuejs/vitepress/issues/603",0.6862457,{"description":2927,"labels":2928,"number":2929,"owner":2856,"repository":2857,"state":2867,"title":2930,"updated_at":2931,"url":2932,"score":2933},"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.68654037,{"description":2935,"labels":2936,"number":2937,"owner":2856,"repository":2857,"state":2867,"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",[],135,"Proper processing of Vue Component slot content","2023-01-21T14:28:50Z","https://github.com/vuejs/vitepress/issues/135",0.6880306,["Reactive",2943],{},["Set"],["ShallowReactive",2946],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fnC4_W_-lh5Veq2o8bZB0X_Obqjd2CFsQf33HH1lYgjM":-1},"/vuejs/vitepress/2432"]