\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.",[2867],{"name":2868,"color":2869},"stale","ededed",2432,"vuejs","vitepress","open","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.6958529,{"description":2879,"labels":2880,"number":2884,"owner":2871,"repository":2872,"state":2885,"title":2886,"updated_at":2887,"url":2888,"score":2889},"I am looking into porting the using vue in Markdown from vuepress: \r\nhttps://vuepress.vuejs.org/guide/using-vue.html\r\n\r\nIf I understand correctly, vitepress doesn't want to auto register components by convention as Vuepress does. Is this the case? I actually liked this feature, but I understand that vitepress wants to keep the moving parts as small as possible.\r\n\r\nWhat is the recommended way to register the components? I see that in vue-router-next docs they are registered globally inside `enhanceApp`: https://github.com/vuejs/vue-router-next/search?q=HomeSponsors.\r\nSame as with this comment: https://github.com/vuejs/vitepress/issues/92#issuecomment-724645482\r\n\r\nShould we document this way in the docs?\r\n\r\nSome thoughts about this. It would be great that users that want to use the default theme as is, do not need to learn straight away about enhanceApp to be able to use a vue component in their markdown.\r\n\r\nIf auto registering by convention in a folder like `.vitepress/components` is not an option, could we import them directly in the markdown?\r\n\r\n```markdown\r\n# Docs\r\n\r\nThis is a .md using a custom component\r\n\r\n\u003CCustomComponent />\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",[2881],{"name":2882,"color":2883},"docs","0075ca",157,"closed","Recommended way to use Custom Vue components in .md","2023-01-21T16:04:10Z","https://github.com/vuejs/vitepress/issues/157",0.6064746,{"description":2891,"labels":2892,"number":2893,"owner":2871,"repository":2872,"state":2885,"title":2894,"updated_at":2895,"url":2896,"score":2897},"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.6485931,{"description":2899,"labels":2900,"number":2904,"owner":2871,"repository":2872,"state":2885,"title":2905,"updated_at":2906,"url":2907,"score":2908},"\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 I use the components directly in markdown file, It raised a waring with `vue.js:1099 [Vue warn]: Failed to resolve componen` as:\r\n\r\n\r\n\r\nDoes vitepress auto register components in `.vitepress/components`? or where can I put the `.vue` files and how to use them? thank you.\r\n\r\n**To Reproduce**\r\nSteps to reproduce the behavior:\r\n\r\n**Expected behavior**\r\nA clear and concise description of what you expected to happen.\r\n\r\n**System Info**\r\n- vitepress version:\r\n- vite version:\r\n- Node version:\r\n- OS version:\r\n\r\n**Additional context**\r\nAdd any other context about the problem here.\r\n",[2901],{"name":2902,"color":2903},"bug: pending triage","e99695",60,"Is vitepress auto register components in `.vitepress/components`?","2023-01-21T16:25:31Z","https://github.com/vuejs/vitepress/issues/60",0.6646958,{"description":2910,"labels":2911,"number":2912,"owner":2871,"repository":2872,"state":2885,"title":2913,"updated_at":2914,"url":2915,"score":2916},"### Is your feature request related to a problem? Please describe.\r\n\r\nIssue 1: Is there a way or how to get the `md` instance (per-configured by VitePress) in Vue component\r\n- I know it might be impossible or being problematic because it's supposed to be run at build-time which is in Node.js, so I'm not expecting a yes answer here, but is there any better alternative way to do so?\r\n- Note due to some reason, I don't really want to write markdown straight away, instead I want to leverage the power of yaml format, and handle the transformation just once. (Since I don't want my team to ask me how to write certain md syntax with my custom component again and again, since `Vue in markdown` is not that straight forward for them). And defining API schemas by `yaml` makes more sense to me instead of writing markdown to document.\r\n\r\nIssue 2: I noticed that by my current implementation (see below), those data are not collected by `local (minisearch)` search. This might be because data collection is happening at build-time (not sure)? Is there any way to work around this?\r\n\r\n---\r\nMy use-case:\r\n\r\nImagine a custom layout here:\r\n```md\r\n---\r\nlayout: api # my custom layout\r\nrequests:\r\n - url: /getSecurityType\r\n method: post\r\n # ....\r\n\r\n - url: /getSecurityCategory\r\n method: post\r\n # ....\r\n---\r\n```\r\nFor example, I want to map the URL to `\u003Ch2>`, and also benefit from built-in VitePress features such as `aside`.\r\n\r\nBut I found out that normal h2 won't work, since `aside` is collecting only `h2` with children, which is the `#` link on the left by default. This makes sense, but it's a little bit hard for me to manually copy the dom.\r\n\r\nA comparison could be like:\r\nWhat I want:\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { useData } from 'vitepress';\r\nimport { md } from '???'; // This is what I want\r\nimport type { ApiFrontMatter } from '@theme/types/api';\r\nimport type { VitePressData } from 'vitepress';\r\nimport type { Ref } from 'vue';\r\n\r\nconst { frontmatter: fm } = useData() as VitePressData & { frontmatter: Ref\u003CApiFrontMatter> };\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"vp-doc\">\r\n \u003Ch1>{{ fm.setName }}\u003C/h1>\r\n\r\n \u003Ctemplate v-for=\"req in fm.requests\" :key=\"req.url\">\r\n \u003C!-- md instance imported from somewhere (that's what I want) -->\r\n {{ md.render(`## ${req.url}`) }}\r\n \u003C/template>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\nCurrently, I have to mimic it (although it works for styles and aside, but search data collection ignores them):\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { useData } from 'vitepress';\r\nimport type { ApiFrontMatter } from '@theme/types/api';\r\nimport type { VitePressData } from 'vitepress';\r\nimport type { Ref } from 'vue';\r\n\r\nconst { frontmatter: fm } = useData() as VitePressData & { frontmatter: Ref\u003CApiFrontMatter> };\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"vp-doc\">\r\n \u003Ch1>{{ fm.setName }}\u003C/h1>\r\n\r\n \u003Ctemplate v-for=\"req in fm.requests\" :key=\"req.url\">\r\n \u003Ch2 :id=\"req.url\">\r\n {{ req.url }}\r\n \u003Ca\r\n class=\"header-anchor\"\r\n :href=\"`#${req.url}`\"\r\n :aria-label=\"`Permalink to "${req.url}"`\"\r\n >\r\n ​\r\n \u003C/a>\r\n \u003C/h2>\r\n \u003C/template>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n### Describe alternatives you've considered\r\n\r\nThe worst case is I need to write a custom `markdown-it` plugin and wrap all those yaml into a custom block and do the transformation there... But honestly that's gonna be a huge pain...\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.",[],2605,"How to get the `md` instance (include all plugins defined) to parse my custom string in Vue component?","2023-08-15T00:04:17Z","https://github.com/vuejs/vitepress/issues/2605",0.67435837,{"description":2918,"labels":2919,"number":2921,"owner":2871,"repository":2872,"state":2885,"title":2922,"updated_at":2923,"url":2924,"score":2925},"### Describe the bug\n\nindex.md not support markdown\n\n### Reproduction\n\n\"I'm encountering an issue with VitePress where Markdown syntax in my index.md file doesn't seem to apply the expected styles on the homepage, whereas in VuePress, this works as anticipated. For instance, if I wish to include some introductory text on the main page and then guide users to the navigation bar, it appears that I need to manually write the CSS styles. Why can't I utilize Markdown for styling in this case?\"\n\n### Expected behavior\n\n\"I'm encountering an issue with VitePress where Markdown syntax in my index.md file doesn't seem to apply the expected styles on the homepage, whereas in VuePress, this works as anticipated. For instance, if I wish to include some introductory text on the main page and then guide users to the navigation bar, it appears that I need to manually write the CSS styles. Why can't I utilize Markdown for styling in this case?\"\n\n### System Info\n\n```Text\n\"I'm encountering an issue with VitePress where Markdown syntax in my index.md file doesn't seem to apply the expected styles on the homepage, whereas in VuePress, this works as anticipated. For instance, if I wish to include some introductory text on the main page and then guide users to the navigation bar, it appears that I need to manually write the CSS styles. Why can't I utilize Markdown for styling in this case?\"\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.",[2920],{"name":2902,"color":2903},3409,"index.md","2024-01-13T00:04:51Z","https://github.com/vuejs/vitepress/issues/3409",0.6839269,{"description":2927,"labels":2928,"number":2929,"owner":2871,"repository":2872,"state":2885,"title":2930,"updated_at":2931,"url":2932,"score":2933},"### Is your feature request related to a problem? Please describe.\r\n\r\nThe markdown of the component is expected to be written under the packages, not in the docs directory.\r\n\r\nLike Dumi: https://d.umijs.org/\r\n\r\nThis will make our documentation more maintainable.\r\n\r\nThis is important when developing monorepo projects.\r\n\r\n### Describe the solution you'd like\r\n\r\nThe directory structure is as follows\r\n\r\n```bash\r\n├── docs/\r\n│ ├── .vitepress/\r\n│ │ ├── dist/\r\n│ │ └── config.js\r\n│ └── index.md\r\n├── packages/\r\n│ └── package-A/\r\n│ ├── dist/\r\n│ ├── node_modules/\r\n│ ├── src/\r\n│ │ ├── ...\r\n│ │ ├── func-A/\r\n│ │ │ ├── __tests__/ # Jest\r\n│ │ │ ├── demos/ # Vue Demos\r\n│ │ │ │ ├── Basic.vue # Example Component\r\n│ │ │ │ └── Timer.vue # Example Component\r\n│ │ │ ├── index.md # API Markdown ☞☞ Expectation: Doc documentation can be written here, can be compiled by vitepress, instead of having to be written in the docs directory\r\n│ │ │ └── index.ts # Source Code\r\n│ │ ├── ...\r\n│ │ └── index.ts\r\n│ ├── README.md\r\n│ ├── package.json\r\n│ ├── tsconfig.json\r\n│ └── typings.d.ts\r\n├── .editorconfig\r\n├── .eslintignore\r\n├── .eslintrc.js\r\n├── .fatherrc.ts\r\n├── .gitignore\r\n├── .npmrc\r\n├── .prettierignore\r\n├── .prettierrc\r\n├── README.md\r\n├── lerna.json\r\n├── package.json\r\n├── pnpm-lock.yaml\r\n├── pnpm-workspace.yaml\r\n└── tsconfig.json\r\n```\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.",[],987,"Documentation in the same style as dumi","2023-02-04T00:04:07Z","https://github.com/vuejs/vitepress/issues/987",0.68874013,{"description":2935,"labels":2936,"number":2937,"owner":2871,"repository":2872,"state":2885,"title":2938,"updated_at":2939,"url":2940,"score":2941},"i want use vitepress become a ui component display website. so i import my sfc in enhanceApp. But at meantime i must config my own `Layout.vue` and `notfound.vue` component. That is not what i want. i liked defaulte theme (vuepress old player) very mush. \r\n\r\n```js\r\nimport Layout from '/@theme/Layout.vue';\r\nimport Helloworld from \"../components/index\"\r\n\r\nexport default {\r\n Layout,\r\n // NotFound,\r\n enhanceApp({ app, router, siteData }) {\r\n app.use(Helloworld) \r\n }\r\n}\r\n```\r\n\r\ni think `@theme/index` should not config default layout and enhanceApp at same time or in the same file. or at least it must follow `Convention over configuration` rule.\r\n\r\nif follow [vuepress default theme file system](https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/theme-default) and `Convention over configuration`, it will be better\r\n\r\nmaybe use `@theme/layouts/`, `@theme/components/`\r\n\r\nand here is a bug, when a create emptyfile `theme` in `.vitepress` .it will crash",[],58,"want more flexibility in the customization part","2023-01-21T16:20:20Z","https://github.com/vuejs/vitepress/issues/58",0.6891397,{"description":2943,"labels":2944,"number":2948,"owner":2871,"repository":2872,"state":2885,"title":2949,"updated_at":2950,"url":2951,"score":2952},"\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\nI wrote a vue3.0 component named \"Test\" want to embed it to markdown file.\r\nThe component just contains an ref object/computed and a click event handler. click,increase the ref object's value and show the computed result on DOM. \r\nThe problem is that when it be placed into VitePress's components dir, it works as will. But, to bring it to Components Library, it just appeared. When click it, the ref object's value can be changed, but \"computed\" won't be executed. In fact, the \"computed\" was executed only once when the page be loaded.\r\nPS: If the Components Library is imported into another VUE3.0 project, the \"Test\" component works as will.\r\n\r\n**To Reproduce**\r\nstep 1: create a simple component in vitepress project's compontents dir and embed it to an markdown file:\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv @click=\"add\">Test{{showMyRef}}\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport {ref,computed} from 'vue'\r\n\r\nexport default {\r\n name: \"Test\",\r\n setup(){\r\n const myRef = ref(0);\r\n const showMyRef = computed(()=>{console.log('computed:',myRef.value);return myRef.value});\r\n const add = ()=>{myRef.value ++;console.log('add:',myRef.value)}\r\n return{myRef,showMyRef,add}\r\n }\r\n}\r\n\u003C/script>\r\n```\r\n\r\nstep 2: click it, it works as will and the log like this:\r\n\r\n```\r\ncomputed: 0\r\nadd: 1\r\ncomputed: 1\r\nadd: 2\r\ncomputed: 2\r\n...\r\n```\r\n\r\nstep 3: To bring it to Components Library and import it, the log like this:\r\n\r\n```\r\ncomputed: 0\r\nadd: 1\r\nadd: 2\r\nadd: 3\r\nadd: 4\r\n```\r\n\r\n**Expected behavior**\r\nThe \"computed\" can work when component in library.\r\n\r\n**System Info**\r\n- vitepress version:0.7.4\r\n- vite version:1.0.0-rc.9\r\n- Node version:v12.8.1\r\n- OS version:win 10 pro 19041.610\r\n\r\n",[2945],{"name":2946,"color":2947},"question","5D5FAE",122,"ref or computed is not working that the vue compontent embedded into markdown file","2023-01-21T16:24:14Z","https://github.com/vuejs/vitepress/issues/122",0.690029,{"description":2954,"labels":2955,"number":2956,"owner":2871,"repository":2872,"state":2885,"title":2957,"updated_at":2958,"url":2959,"score":2960},"### 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.69035393,["Reactive",2962],{},["Set"],["ShallowReactive",2965],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fFN-iI7a2jkvL77UI9Op6S-Unq7kTiZY_5EGZOxD9cJU":-1},"/vuejs/vitepress/101"]