\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.",[2856],{"name":2857,"color":2858},"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.68363607,{"description":2868,"labels":2869,"number":2871,"owner":2860,"repository":2861,"state":2862,"title":2872,"updated_at":2873,"url":2874,"score":2875},"### Is your feature request related to a problem? Please describe.\r\n\r\nsuch as a vue components library site……\r\nA common problem for a documentation page is to show how to use a component, both in code and with demo of live component.\r\n\r\n### Describe the solution you'd like\r\n\r\nlike this [https://github.com/flingyp/vitepress-demo-preview](https://github.com/flingyp/vitepress-demo-preview)\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.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.",[2870],{"name":2857,"color":2858},3270,"Feature request: Vue component source code demo","2024-01-18T18:48:08Z","https://github.com/vuejs/vitepress/issues/3270",0.68685997,{"description":2877,"labels":2878,"number":2879,"owner":2860,"repository":2861,"state":2862,"title":2880,"updated_at":2881,"url":2882,"score":2883},"I'm a novice front-end programmer and I'm using vitepress to build websites. Currently, I need to develop using the components in the inspira UI component library, but I don't know how to configure this component library.\n\nThe official inspira UI tutorial link is [inspira UI](https://inspira-ui.com/getting-started/installation)\n\nMy project link [Moeus site](https://github.com/Moeus/moeus_site)\n\nIf someone can teach me, I would be grateful",[],4717,"How to add inspira UI component library to vitepress project","2025-04-24T07:22:45Z","https://github.com/vuejs/vitepress/issues/4717",0.6986227,{"description":2885,"labels":2886,"number":2890,"owner":2860,"repository":2861,"state":2891,"title":2892,"updated_at":2893,"url":2894,"score":2895},"### Describe the bug\n\nHey, \r\n\r\nIt's not a bug report, just a question.\r\n\r\nHow to install with a module who's use browser features (document.querySelectorAll) with `ctx.app.use()` on client side ? \r\n\r\nI can't find the way in the documentation. In VuePress, we can use the variable `__VUEPRESS_SSR__`, do you something similar in VitePress ? \r\n\r\nN.B: It's works fine with the dev serve but fail on build time\r\n\r\n## In VuePress\r\n\r\n`docs/.vuepress/client.ts`\r\n\r\n```ts\r\nimport { defineClientConfig } from '@vuepress/client'\r\nimport { clientModule } from 'lib'\r\n\r\nexport default defineClientConfig({\r\n enhance: async ({ app, router }) => {\r\n if (!__VUEPRESS_SSR__) {\r\n app.use(clientModule)\r\n }\r\n }\r\n})\r\n```\r\n\r\n## In VitePress \r\n\r\n`docs/.vitepress/theme/index.ts`\r\n\r\n```ts\r\nconst theme: typeof DefaultTheme = {\r\n ...DefaultTheme,\r\n enhanceApp({ app }) {\r\n app.use(clientModule) // It's doesn't works 😑\r\n },\r\n}\r\n```\r\n\r\n\n\n### Reproduction\n\n-\n\n### Expected behavior\n\nBe able to build the app with client\n\n### System Info\n\n```shell\nSystem:\r\n OS: macOS 12.6.1\r\n CPU: (10) arm64 Apple M1 Pro\r\n Memory: 314.09 MB / 16.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 16.18.1 - /opt/homebrew/opt/node@16/bin/node\r\n Yarn: 1.22.19 - ~/.yarn/bin/yarn\r\n npm: 8.19.2 - /opt/homebrew/opt/node@16/bin/npm\r\n Browsers:\r\n Chrome: 108.0.5359.98\r\n Firefox: 101.0.1\r\n Safari: 15.6.1\r\n npmPackages:\r\n vitepress: ^1.0.0-alpha.30 => 1.0.0-alpha.30\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.vuejs.org).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2887],{"name":2888,"color":2889},"bug: pending triage","e99695",1681,"closed","[QUESTION] checking if in client side to install plugin","2023-01-21T14:20:27Z","https://github.com/vuejs/vitepress/issues/1681",0.6646708,{"description":2897,"labels":2898,"number":2900,"owner":2860,"repository":2861,"state":2891,"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.",[2899],{"name":2888,"color":2889},3485,"Using vue to report errors in markdown","2024-01-29T00:04:28Z","https://github.com/vuejs/vitepress/issues/3485",0.6682025,{"description":2906,"labels":2907,"number":1577,"owner":2860,"repository":2861,"state":2891,"title":2908,"updated_at":2909,"url":2910,"score":2911},"As a member of current vuepress team, I just created a prototype for vuepress next major version: https://github.com/vuepress/vuepress-next\r\n\r\n- Vue 3 ecosystem\r\n- Typescript\r\n- Drop class API, use compositional functions\r\n- Try do decouple with webpack, may support different bundlers (e.g. vite)\r\n\r\nToday I noticed vitepress and don't know where to go next 😢 \r\n\r\n@yyx990803 Could you please give some advice? ",[],"Just created vuepress-next prototype before noticed this project","2023-01-21T16:24:21Z","https://github.com/vuejs/vitepress/issues/13",0.68228364,{"description":2913,"labels":2914,"number":2918,"owner":2860,"repository":2861,"state":2891,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### Describe the bug\n\ndocs:build fails element-plus, when used with unplugin-vue-components and ssr: false\r\n\r\n```\r\n Components({\r\n dirs: ['components'],\r\n include: [/\\.vue$/, /\\.md$/],\r\n resolvers: [ElementPlusResolver({ ssr: false })]\r\n })\r\n\r\n```\r\n\r\nWhile changing to ssr:true gets the build to succeed, with this CSS isn't loaded. \n\n### Reproduction\n\n1. Close the repo https://github.com/akil-rails/vitepress-with-element-plus\r\n2. pnpm docs:build\r\n\r\nBuild fails with the following error: \r\n\r\n```\r\n> vitepress build docs\r\n\r\nvitepress v1.0.0-alpha.4\r\n⠸ building client + server bundles...warnings when minifying css:\r\n▲ [WARNING] \"@charset\" must be the first rule in the file\r\n\r\n \u003Cstdin>:3820:0:\r\n 3820 │ @charset \"UTF-8\";:root{--el-color-white:#ffffff;--el-color-black...\r\n ╵ ~~~~~~~~\r\n\r\n This rule cannot come before a \"@charset\" rule\r\n\r\n \u003Cstdin>:1:0:\r\n 1 │ @font-face {\r\n ╵ ^\r\n\r\n\r\n✓ building client + server bundles...\r\n⠋ rendering pages...Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/akhileshkataria/Code/spikes/vitepress-with-element-plus/node_modules/.pnpm/element-plus@2.2.13_vue@3.2.37/node_modules/element-plus/es/index.mjs not supported.\r\nInstead change the require of /Users/akhileshkataria/Code/spikes/vitepress-with-element-plus/node_modules/.pnpm/element-plus@2.2.13_vue@3.2.37/node_modules/element-plus/es/index.mjs to a dynamic import() which is available in all CommonJS modules.\r\n at Module.\u003Canonymous> (/Users/akhileshkataria/Code/spikes/vitepress-with-element-plus/docs/.vitepress/.temp/index.md.js:3:10)\r\n at /Users/akhileshkataria/Code/spikes/vitepress-with-element-plus/docs/.vitepress/.temp/app.js:4045:50\r\n at async loadPage (/Users/akhileshkataria/Code/spikes/vitepress-with-element-plus/docs/.vitepress/.temp/app.js:216:16) {\r\n code: 'ERR_REQUIRE_ESM'\r\n}\r\n✖ rendering pages...\r\nbuild error:\r\n Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/akhileshkataria/Code/spikes/vitepress-with-element-plus/node_modules/.pnpm/element-plus@2.2.13_vue@3.2.37/node_modules/element-plus/es/index.mjs not supported.\r\nInstead change the require of /Users/akhileshkataria/Code/spikes/vitepress-with-element-plus/node_modules/.pnpm/element-plus@2.2.13_vue@3.2.37/node_modules/element-plus/es/index.mjs to a dynamic import() which is available in all CommonJS modules.\r\n at Module.\u003Canonymous> (/Users/akhileshkataria/Code/spikes/vitepress-with-element-plus/docs/.vitepress/.temp/index.md.js:3:10)\r\n at async Promise.all (index 0)\r\n at async renderPage (file:///Users/akhileshkataria/Code/spikes/vitepress-with-element-plus/node_modules/.pnpm/vitepress@1.0.0-alpha.4/node_modules/vitepress/dist/node/serve-05342c3d.js:39555:28)\r\n at async build (file:///Users/akhileshkataria/Code/spikes/vitepress-with-element-plus/node_modules/.pnpm/vitepress@1.0.0-alpha.4/node_modules/vitepress/dist/node/serve-05342c3d.js:39853:9) {\r\n code: 'ERR_REQUIRE_ESM'\r\n\r\n```\r\n\r\n\n\n### Expected behavior\n\nThe build should succeed.\n\n### System Info\n\n```shell\nSystem:\r\n OS: macOS 11.6.7\r\n CPU: (8) x64 Intel(R) Core(TM) i7-4960HQ CPU @ 2.60GHz\r\n Memory: 510.54 MB / 16.00 GB\r\n Shell: 3.2.57 - /bin/bash\r\n Binaries:\r\n Node: 16.15.1 - /usr/local/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 8.11.0 - /usr/local/bin/npm\r\n Browsers:\r\n Chrome: 103.0.5060.53\r\n Safari: 15.5\r\n npmPackages:\r\n vitepress: 1.0.0-alpha.4 => 1.0.0-alpha.4\n```\n\n\n### Additional context\n\nelement-plus has been discussed earlier: https://github.com/vuejs/vitepress/issues/603\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.",[2915],{"name":2916,"color":2917},"build","377ba8",1164,"Unable to use element-plus with vitepress: works in dev mode, but fails to build","2023-01-21T14:25:26Z","https://github.com/vuejs/vitepress/issues/1164",0.6856828,{"description":2924,"labels":2925,"number":2929,"owner":2860,"repository":2861,"state":2891,"title":2930,"updated_at":2931,"url":2932,"score":2933},"### Is your feature request related to a problem? Please describe.\r\n\r\nWhen I use Element-Plus in VitePress, the partial style of the component is modified. The reason is VitePress `src/client/theme-default/styles/layout.css` File reset all styles.\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n### Describe the solution you'd like\r\n\r\nI hope this code only takes effect in VitePress.\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/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.",[2926],{"name":2927,"color":2928},"duplicate","cfd3d7",434,"This is a suggestion","2023-01-21T16:04:15Z","https://github.com/vuejs/vitepress/issues/434",0.69193304,{"description":2935,"labels":2936,"number":2938,"owner":2860,"repository":2861,"state":2891,"title":2939,"updated_at":2940,"url":2941,"score":2942},"\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\nAfter running npx vitepress, I open the browser and load the address of http://localhost:3000, but I get a error.\r\n\r\n**To Reproduce**\r\nSteps to reproduce the behavior:\r\nPS D:\\桌面\\demo> npx vitepress\r\nvitepress v0.5.0\r\nvite v1.0.0-rc.4\r\nlistening at http://localhost:3000\r\n[vite] Failed to resolve module import \"vue/dist/vue.runtime.esm-bundler.js.0.0-rc.5@vuedist\u000bue.runtime.esm-bundler.js\". (imported by /@app/components/Debug.vue)\r\n\r\n**Expected behavior**\r\nGetting \"Hello Vitepress\" in browser.\r\n\r\n**System Info**\r\n- vitepress version: v0.5.0\r\n- vite version: v1.0.0-rc.4\r\n- Node version: 12.14.0\r\n- OS version:10.0.19041 暂缺 Build 19041\r\n\r\n**Additional context**\r\n尤大大,I am you big fan.\r\n",[2937],{"name":2888,"color":2889},65,"服务启动之后,进入地址报错","2023-01-21T16:25:36Z","https://github.com/vuejs/vitepress/issues/65",0.6926679,{"description":2944,"labels":2945,"number":2949,"owner":2860,"repository":2861,"state":2891,"title":2950,"updated_at":2951,"url":2952,"score":2953},"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",[2946],{"name":2947,"color":2948},"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.6939671,["Reactive",2955],{},["Set"],["ShallowReactive",2958],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f7i7kjGUjCTmN2j9uS7ilV4Z69YU6MOSrEMuuQ8vpypw":-1},"/vuejs/vitepress/603"]