\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.68940836,{"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.6511631,{"description":2891,"labels":2892,"number":2893,"owner":2871,"repository":2872,"state":2885,"title":2894,"updated_at":2895,"url":2896,"score":2897},"### 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.67695016,{"description":2899,"labels":2900,"number":2904,"owner":2871,"repository":2872,"state":2885,"title":2905,"updated_at":2906,"url":2907,"score":2908},"### 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.",[2901],{"name":2902,"color":2903},"need more info","bdbefc",2095,"vitepress not support jsx file?","2023-03-29T00:04:14Z","https://github.com/vuejs/vitepress/issues/2095",0.67876816,{"description":2910,"labels":2911,"number":2912,"owner":2871,"repository":2872,"state":2885,"title":2913,"updated_at":2914,"url":2915,"score":2916},"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.6826949,{"description":2918,"labels":2919,"number":2920,"owner":2871,"repository":2872,"state":2885,"title":2921,"updated_at":2922,"url":2923,"score":2924},"I want to importing a tsx component in markdown like this\r\n\r\n```md\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\nimport CustomComponent from '../components/CustomComponent.tsx'\r\n\u003C/script>\r\n```\r\n\r\nbut found error:\r\n```bash\r\nLayout.vue:114 Uncaught (in promise) TypeError: Cannot destructure property 'frontmatter' of 'route.data' as it is null.\r\n```\r\n",[],279,"vitepress support tsx ?","2023-01-21T14:17:13Z","https://github.com/vuejs/vitepress/issues/279",0.688212,{"description":2926,"labels":2927,"number":2931,"owner":2871,"repository":2872,"state":2885,"title":2932,"updated_at":2933,"url":2934,"score":2935},"### Discussed in https://github.com/vuejs/vitepress/discussions/527\r\n\r\n\u003Cdiv type='discussions-op-text'>\r\n\r\n\u003Csup>Originally posted by **WebMechanic** February 11, 2022\u003C/sup>\r\nHello,\r\n\r\nI have a fresh install of VitePress to document our new Style Guide and wanted to use the [Import Code Snippets](https://vitepress.vuejs.org/guide/markdown.html#import-code-snippets) feature for .js, .css and .html fragments, but the file(s) are not included. I tried all sorts of pathnames with/without the `base`, relative, absolute, all to no avail.\r\nEverything else works like a charme.\r\n\r\nThe project is a simple Vite Vue project. I then installed VitePress with yarn. \r\nIt resides in `src/_docs/.vitepress`.\r\n\r\nHere's the config file\r\n```js\r\nimport {defineConfig} from 'vitepress'\r\nexport default defineConfig({\r\n base: '/src/_docs/',\r\n title: \"The Style Guide\",\r\n markdown: {\r\n lineNumbers: false,\r\n toc: {includeLevel: [1, 2]},\r\n }\r\n}\r\n```\r\n\u003C/div>\r\n\r\nIt's not clear to me, if this requires some special care for Prism. Configuration seems very different fro what I can find on Lea Verou's site.\r\n",[2928],{"name":2929,"color":2930},"invalid","ffffff",530,"\"Import Code Snippets\" not working","2023-01-21T16:04:03Z","https://github.com/vuejs/vitepress/issues/530",0.6891566,{"description":2937,"labels":2938,"number":1224,"owner":2871,"repository":2872,"state":2885,"title":2942,"updated_at":2943,"url":2944,"score":2945},"Hello!\r\n\r\nDocumentation says \"...allowing the user to freely mix Vue components inside markdown content...\" but it doesn't work as VuePress.\r\n\r\nTo reproduce init project according to documentation.\r\nCreate `.vitepress/components/NewComponent.vue` with a `\u003Ctemplate>\u003Cp>Hello VitePress\u003C/p>\u003C/template>`\r\nTry to use `\u003CNewComponent />` inside index.md\r\n\r\nExpected to see rendered component on the page see nothing.\r\nConsole says \"Failed to resolve component: NewComponent\"\r\n\r\nWhat I'm doing wrong? ",[2939],{"name":2940,"color":2941},"question","5D5FAE","Cant figure out how to use components inside .md file","2023-01-21T16:24:22Z","https://github.com/vuejs/vitepress/issues/101",0.6917563,{"description":2947,"labels":2948,"number":2949,"owner":2871,"repository":2872,"state":2885,"title":2950,"updated_at":2951,"url":2952,"score":2953},"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.6979793,{"description":2955,"labels":2956,"number":2957,"owner":2871,"repository":2872,"state":2885,"title":2958,"updated_at":2959,"url":2960,"score":2961},"\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 using a custom theme, importing composables like `useRoute` from `\"vitepress\"` in the Layout component also imports the styles for the default theme.\r\n\r\n**To Reproduce**\r\n\r\n1. Follow the [Getting Started guide](https://vitepress.vuejs.org/guide/getting-started.html) to create a new site\r\n2. Create `docs/.vitepress/theme/Layout.vue` with the following contents:\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CContent />\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n// import { useRoute } from \"vitepress\";\r\n// const route = useRoute();\r\n\u003C/script>\r\n```\r\n\r\n3. Create `docs/.vitepress/theme/index.js` with the following contents:\r\n\r\n```js\r\nimport Layout from \"./Layout.vue\";\r\n\r\nexport default {\r\n Layout,\r\n};\r\n```\r\n\r\n4. Run `yarn docs:dev` and open http://localhost:3000. Note the heading doesn't have any styles applied to it:\r\n\r\n\r\n\r\n5. Uncomment the lines in the `\u003Cscript setup>` section in `docs/.vitepress/theme/Layout.vue`. Note the heading now has the default styles applied to it, even though we only imported `useRoute`:\r\n\r\n\r\n\r\n**Expected behavior**\r\nThe heading should remain unstyled since we aren't explicitly importing any styles.\r\n\r\n**System Info**\r\n- vitepress version: v0.9.2\r\n- vite version: v1.0.0-rc.13\r\n- Node version: v12.20.0\r\n- OS version: macOS Catalina 10.15.7\r\n\r\n**Additional context**\r\nI had a quick look at the Vitepress code and it looks like the problem might be to do with this line: https://github.com/vuejs/vitepress/blob/309aa7a8d0e7ab08c1c9db258c74709a66b295cb/src/client/app/exports.ts#L29\r\n\r\nAdding the following to `docs/.vitepress/config.js`:\r\n\r\n```javascript\r\nmodule.exports = {\r\n alias: {\r\n \"/@default-theme/index\": \"/@theme/empty.js\",\r\n },\r\n};\r\n```\r\n\r\n...and creating an empty file `docs/.vitepress/theme/empty.js` prevents the default styles being applied.\r\n",[],182,"Importing default composables also imports default theme's styles","2023-01-21T16:23:59Z","https://github.com/vuejs/vitepress/issues/182",0.7003974,["Reactive",2963],{},["Set"],["ShallowReactive",2966],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fIMtACZLKq034DyXvm3CNRyk3hLRWVmyUMPqWAuiQRHI":-1},"/vuejs/vitepress/535"]