`)\r\n\r\nI'm currently working on migrating and documenting the excellent Spectre CSS docs and am using Vitepress.\r\n\r\nI'm developing an ejected and modified default theme which has already come some way to solving this problem:\r\n\r\n- [original](https://picturepan2.github.io/spectre/components/menu.html) (custom app)\r\n- [migrated](https://spectre-org.github.io/spectre-docs/docs/components/menu.html) (VitePress with modified default theme)\r\n - note the `vp-doc` formatting which is all Spectre CSS\r\n - some fixed, and some not-yet fixed clashes of general class names\r\n\r\nFor reference to the use case (documenting a 3rd-party framework) here is the raw markdown page:\r\n\r\n- https://raw.githubusercontent.com/spectre-org/spectre-docs/main/docs/components/menu.md\r\n\r\nNote that:\r\n\r\n- Spectre CSS (or any other 3rd-party CSS framework) is now able to be simply \"dropped in\"\r\n- there is no pollution between VitePress and the 3rd-party framework\r\n- VitePress' default components remain fully-styled and work as they were before\r\n- `vp-doc` content can be safely used to demo any 3rd party HTML elements and classes\r\n\r\nI think I know enough to fix the problems in my modified theme and either:\r\n\r\n- publish a new \"neutral\" theme\r\n- port the changes to the default theme (ideal outcome)\r\n\r\nThere's actually not that much work; it's:\r\n\r\n- renaming the general component classes\r\n- moving some `vp-doc` classes to other locations\r\n- creating an additional unstyled entrypoint such as `without-formatting`\r\n\r\n### Describe alternatives you've considered\r\n\r\nPublishing the modified theme standalone, but then of course it would not benefit from ongoing updates.\r\n\r\n### Additional context\r\n\r\nI am proposing a PR in the coming weeks to integrate these updates.\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.",[2865],{"name":2866,"color":2867},"stale","ededed",3021,"vuejs","vitepress","open","Make the default theme compatible with 3rd-party CSS frameworks","2023-11-06T14:43:58Z","https://github.com/vuejs/vitepress/issues/3021",0.72399855,{"description":2877,"labels":2878,"number":2879,"owner":2869,"repository":2870,"state":2880,"title":2881,"updated_at":2882,"url":2883,"score":2884},"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,"closed","want more flexibility in the customization part","2023-01-21T16:20:20Z","https://github.com/vuejs/vitepress/issues/58",0.6732617,{"description":2886,"labels":2887,"number":2891,"owner":2869,"repository":2870,"state":2880,"title":2892,"updated_at":2893,"url":2894,"score":2895},"I'd like to only have a custom NavLinks component while keeping the default vitepress theme. Next I looked at the NavBar although also my version doesn't override. Any help in the right direction would be great.\r\n\r\ndocs/.vitepress/config.js\r\n\r\n```\r\nimport Theme from 'vitepress/theme'\r\nimport '../../assets/vars.css'\r\nimport NavBar from './Mynav.vue'\r\n\r\nconst MyTheme = {...Theme, Layout: {...Theme.Layout, NavBar}}\r\n\r\nexport default {\r\n ...MyTheme,\r\n NotFound: () => 'custom 404',\r\n enhanceApp({app, router, siteData}) {\r\n\r\n },\r\n}\r\n```\r\n ",[2888],{"name":2889,"color":2890},"docs","0075ca",235,"Extending the vitepress theme","2023-03-18T00:04:16Z","https://github.com/vuejs/vitepress/issues/235",0.6860904,{"description":2897,"labels":2898,"number":2899,"owner":2869,"repository":2870,"state":2880,"title":2900,"updated_at":2901,"url":2902,"score":2903},"\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.6873824,{"description":2905,"labels":2906,"number":1575,"owner":2869,"repository":2870,"state":2880,"title":2907,"updated_at":2908,"url":2909,"score":2910},"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.6952796,{"description":2912,"labels":2913,"number":2917,"owner":2869,"repository":2870,"state":2880,"title":2918,"updated_at":2919,"url":2920,"score":2921},"### Is your feature request related to a problem? Please describe.\n\nI want to use `Badge` component in my custom theme. And the `Badge` component not exportd by `vitepress/theme`\r\n\r\nSo I can do this only:\r\n```ts\r\nimport Theme from 'vitepress/theme'\r\n\r\nexport default {\r\n\t...Theme,\r\n\tenhanceApp(ctx) {\r\n\t \tTheme.enhanceApp(ctx)\r\n\t\t// Custom content\r\n\t}\r\n}\r\n```\n\n### Describe the solution you'd like\n\nSo I' d like to import `Badge` from `vitepress/theme` directly\r\n\r\n```ts\r\nimport { Badge } from 'vitepress/theme'\r\n\r\nexport default {\r\n\t...Theme,\r\n\tenhanceApp(ctx) {\r\n\t \tctx.app.component('Badge', VPBadge);\r\n\t\t// Custom content\r\n\t}\r\n}\r\n```\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.",[2914],{"name":2915,"color":2916},"contribution welcome","11E4B8",3430,"Export `Badge` component for custom Theme","2024-01-18T00:04:42Z","https://github.com/vuejs/vitepress/issues/3430",0.70382684,{"description":2923,"labels":2924,"number":2925,"owner":2869,"repository":2870,"state":2880,"title":2926,"updated_at":2927,"url":2928,"score":2929},"**Is your feature request related to a problem? Please describe.**\r\nCurrently, importing Vue components (whether they are VitePress components, or components from a library for example) are influenced by VitePress's somewhat sub-optimal styles.\r\n\r\nFor example, all headings are styled, so as soon as a component uses an `h1`/`h2`/etc, it will inherit those styles, making VitePress virtually unusable for component libraries that ship their own CSS.\r\n\r\nThe only I can think of mitigating this, is to use a web component as a base for Vue components to be mounted in, as styles are local to web components if I remember correctly.\r\n\r\n**Describe the solution you'd like**\r\nSome way to render components with their own styles, and not inherit styles from the docs.\r\n\r\n**Describe alternatives you've considered**\r\nI tries unsetting all styles `* { all: unset; }` inside our demo component (the wrapper for all other components), but that also removes some of the Tailwind related styling unfortunately.\r\n\r\nI couldn't get web components to work, as the vue plugin seems to be for Vue 2 (https://github.com/vuejs/vue-web-component-wrapper).",[],248,"[Feature] - Allow local styling of components","2023-01-21T16:04:20Z","https://github.com/vuejs/vitepress/issues/248",0.7039382,{"description":2931,"labels":2932,"number":2934,"owner":2869,"repository":2870,"state":2880,"title":2935,"updated_at":2936,"url":2937,"score":2938},"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",[2933],{"name":2889,"color":2890},157,"Recommended way to use Custom Vue components in .md","2023-01-21T16:04:10Z","https://github.com/vuejs/vitepress/issues/157",0.70505166,{"description":2940,"labels":2941,"number":2942,"owner":2869,"repository":2870,"state":2880,"title":2943,"updated_at":2944,"url":2945,"score":2946},"**Is your feature request related to a problem? Please describe.**\r\n\r\nCurrently a VuePress user and excited to move to VitePress (primarily because I've written my own VP themes from scratch, and this seems to be the main design goal for v3) but:\r\n\r\n- there are various key differences between the frameworks (bundler, plugins, config)\r\n- there are significant intentional omissions in v3 (rather large list in the docs)\r\n- it's still in development\r\n\r\nAs a new / migrating user, it's a bit of a minefield and difficult to know where to start when something is omitted.\r\n\r\n**Describe the solution you'd like**\r\n\r\nRather than clogging up the issues with questions, it would be cool to get an Awesome VitePress list going, so users could find alternative plugins, or dig through the code of known solutions (i.e. the Vue Blog) and see how it's been solved before.\r\n\r\n**Describe alternatives you've considered**\r\n\r\nClog up the issues with questions, bug @kiaking on Twitter, Google solutions, etc.\r\n\r\n**Additional context**\r\n\r\nHappy to help search and review resources to get it started.\r\n\r\n",[],253,"List of examples or some kind of Awesome VitePress repo","2023-01-28T15:54:22Z","https://github.com/vuejs/vitepress/issues/253",0.7135119,{"description":2948,"labels":2949,"number":2950,"owner":2869,"repository":2870,"state":2880,"title":2951,"updated_at":2952,"url":2953,"score":2954},"\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\nCopying the configuration of vuepress to vitepress, the sidebar is not displayed as a result.\r\n\r\n**To Reproduce**\r\nSteps to reproduce the behavior:\r\nClone Repo: [https://github.com/misitebao/template-vitepress.git](https://github.com/misitebao/template-vitepress.git)\r\nRun: npm i && npm run dosc:dev\r\n\r\n**Expected behavior**\r\nDisplay the sidebar normally\r\n\r\n**System Info**\r\n- vitepress version: v0.12.2\r\n- vite version: \r\n- Node version: v14.8.0\r\n- OS version: Win10\r\n\r\n**Additional context**\r\nI want to implement a template template as the basis for subsequent vitepress projects\r\n",[],260,"Copying the configuration of vuepress to vitepress, the sidebar is not displayed as a result.","2023-01-21T16:22:24Z","https://github.com/vuejs/vitepress/issues/260",0.7140201,["Reactive",2956],{},["Set"],["ShallowReactive",2959],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fp5mOMgq9h29vc4vkkK_G90RTKv5q97BgJcRPtinSWNo":-1},"/vuejs/vitepress/2102"]