`)\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.7064522,{"description":2877,"labels":2878,"number":2879,"owner":2869,"repository":2870,"state":2880,"title":2881,"updated_at":2882,"url":2883,"score":2884},"\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,"closed","Importing default composables also imports default theme's styles","2023-01-21T16:23:59Z","https://github.com/vuejs/vitepress/issues/182",0.6984837,{"description":2886,"labels":2887,"number":2888,"owner":2869,"repository":2870,"state":2880,"title":2889,"updated_at":2890,"url":2891,"score":2892},"**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.70162994,{"description":2894,"labels":2895,"number":2902,"owner":2869,"repository":2870,"state":2880,"title":2903,"updated_at":2904,"url":2905,"score":2906},"### Is your feature request related to a problem? Please describe.\n\nFind myself wanting to use VPButton and VPSponsors on a few places throughout my site. Right now, I exported them through a patch, but would great if they were exported by default.\n\n### Describe the solution you'd like\n\nVPButton and VPSponsors exported.\n\n### Describe alternatives you've considered\n\nCurrently use the following patch:\r\n\r\n```diff\r\ndiff --git a/dist/client/theme-default/without-fonts.js b/dist/client/theme-default/without-fonts.js\r\nindex 2b760aa398b7ac1881551ab146d7d308ef2277a3..a2940ca0b99b7673d8914e4bf332f57c588e8f46 100644\r\n--- a/dist/client/theme-default/without-fonts.js\r\n+++ b/dist/client/theme-default/without-fonts.js\r\n@@ -11,10 +11,12 @@ import Layout from './Layout.vue';\r\n // Note: if we add more optional components here, i.e. components that are not\r\n // used in the theme by default unless the user imports them, make sure to update\r\n // the `lazyDefaultThemeComponentsRE` regex in src/node/build/bundle.ts.\r\n+export { default as VPButton } from './components/VPButton.vue';\r\n export { default as VPHomeHero } from './components/VPHomeHero.vue';\r\n export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue';\r\n export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue';\r\n export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue';\r\n+export { default as VPSponsors } from './components/VPSponsors.vue';\r\n export { default as VPTeamPage } from './components/VPTeamPage.vue';\r\n export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue';\r\n export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue';\r\ndiff --git a/theme.d.ts b/theme.d.ts\r\nindex 4b1076b5fbda893eb6f4a5df6a40c15d1bb379ba..177f5a6aa9602e0eeae954137bcce1ac0080ddef 100644\r\n--- a/theme.d.ts\r\n+++ b/theme.d.ts\r\n@@ -3,10 +3,12 @@ import type { DefineComponent } from 'vue'\r\n import { EnhanceAppContext } from './dist/client/index.js'\r\n \r\n // TODO: add props for these\r\n+export const VPButton: DefineComponent\r\n export const VPHomeHero: DefineComponent\r\n export const VPHomeFeatures: DefineComponent\r\n export const VPHomeSponsors: DefineComponent\r\n export const VPDocAsideSponsors: DefineComponent\r\n+export const VPSponsors: DefineComponent\r\n export const VPTeamPage: DefineComponent\r\n export const VPTeamPageTitle: DefineComponent\r\n export const VPTeamPageSection: DefineComponent\r\n```\n\n### Additional context\n\nHappy to open a PR for this!\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.",[2896,2899],{"name":2897,"color":2898},"theme","0754FB",{"name":2900,"color":2901},"contribution welcome","11E4B8",2765,"Export VPButton + VPSponsors","2023-08-23T00:04:06Z","https://github.com/vuejs/vitepress/issues/2765",0.7164896,{"description":2908,"labels":2909,"number":2914,"owner":2869,"repository":2870,"state":2880,"title":2915,"updated_at":2916,"url":2917,"score":2918},"### Describe the bug\r\n\r\nI packed the naive ui component and when I use the npm package, because I use style.css and document inject package,To avoid build errors , I config enhanceApp: \r\n\r\n```ts\r\nimport naive from 'naive-ui'\r\nexport default {\r\n ...DefaultTheme,\r\n enhanceApp({ app }) {\r\n app.use(naive)\r\n app.mixin({\r\n mounted() {\r\n import('wmt-ui').then(function(m) {\r\n app.use(m.default)\r\n })\r\n },\r\n })\r\n }\r\n}\r\n```\r\n\r\n### Reproduction\r\n\r\nnpm run docs: dev OK\r\nnpm run docs: build OK\r\n\r\nBut I refresh the page, the third component did not recognized \r\n\r\n### Expected behavior\r\n\r\nAfter refresh, the third component recognized \r\n\r\n### System Info\r\n\r\n```shell\r\n\"system\": windows\r\n\"npm\" : \"8.5.0\"\r\n\"vitepress\": \"^1.0.0-alpha.4\",\r\n\"vue\": \"^3.2.33\"\r\n\"browser\": \"chrome\"\r\n```\r\n\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] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2910,2913],{"name":2911,"color":2912},"bug: pending triage","e99695",{"name":2866,"color":2867},1564,"when I use the npm package, F5 refresh, the component not recognized ","2023-08-12T00:04:35Z","https://github.com/vuejs/vitepress/issues/1564",0.71915865,{"description":2920,"labels":2921,"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\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.",[2922],{"name":2923,"color":2924},"duplicate","cfd3d7",434,"This is a suggestion","2023-01-21T16:04:15Z","https://github.com/vuejs/vitepress/issues/434",0.7193497,{"description":2931,"labels":2932,"number":2933,"owner":2869,"repository":2870,"state":2880,"title":2934,"updated_at":2935,"url":2936,"score":2937},"### Describe the bug\n\n\r\n\r\nMy component style is the red box on the left, and the blue box on the right is the default of vitepress, which causes the style of my component to be overwritten. How can I configure the table style without using vitepress and use the style of my component?\r\n\r\n我的组件样式是左侧红框的,右侧蓝框是 vitepress 默认的,导致覆盖了我组件的样式,我怎么才能配置不使用 vitepress 的 table 样式,用我组件的样式\n\n### Reproduction\n\nNone\n\n### Expected behavior\n\nNone\n\n### System Info\n\n```Text\nNone\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.",[],4309,"How to disable all styles for a .vp-doc table","2024-11-04T04:43:46Z","https://github.com/vuejs/vitepress/issues/4309",0.72056323,{"description":2939,"labels":2940,"number":2941,"owner":2869,"repository":2870,"state":2880,"title":2942,"updated_at":2943,"url":2944,"score":2945},"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.7285677,{"description":2947,"labels":2948,"number":2950,"owner":2869,"repository":2870,"state":2880,"title":2951,"updated_at":2952,"url":2953,"score":2954},"### Is your feature request related to a problem? Please describe.\n\nRight now it’s not possible to change the text in the prev/next links that are displayed at the bottom of pages with the default theme.\r\n\u003Cimg width=\"378\" alt=\"Screenshot 2022-07-01 at 23 45 56\" src=\"https://user-images.githubusercontent.com/18370980/176971436-a1d5d9d3-2cb2-4088-a94d-69307d0b20a7.png\">\r\n \r\nThis is not very elegant when you’re working with non-English docs :)\n\n### Describe the solution you'd like\n\nI guess a `themeConfig.docFooter.[prev|next]` option, or something similar, would do the trick.\n\n### Describe alternatives you've considered\n\nOne option would be building a custom theme that extends the default one and overriding [VPDocFooter.vue](https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/components/VPDocFooter.vue), but imo this feature could also benefit a lot of users of the default theme.\n\n### Additional context\n\nThanks for being awesome!\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.",[2949],{"name":2897,"color":2898},893,"Make it possible to change the \"Previous page\" and \"Next page\" labels in the default theme","2023-01-21T14:32:49Z","https://github.com/vuejs/vitepress/issues/893",0.7289289,{"description":2956,"labels":2957,"number":2959,"owner":2869,"repository":2870,"state":2880,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### Describe the bug\n\nI registered a global component named `user`, and used it as `layout`, \r\nbut I didn't contain a `\u003CContent />` component because I don't intend to render markdown.\r\n\r\nthen, I write a markdown `user.md`, like this:\r\n```\r\n---\r\nlayout: user\r\n---\r\n```\r\n\r\nbut, when I navigate from another page(layout: doc) to `user.md`, the aside content isn't updated. \r\nsee:\r\nfind\n\n### Reproduction\n\nsee: [https://stackblitz.com/edit/vite-omxrm4](https://stackblitz.com/edit/vite-omxrm4?file=docs%2Findex.md)\n\n### Expected behavior\n\nWhen Navigating to another layout, the aside content can be updated in the `\u003CNav>` component, even if it doesn't contain the `\u003CContent>` component\n\n### System Info\n\n```Text\n~\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.",[2958],{"name":2911,"color":2912},3251,"In the default theme, `\u003CNav>` component doesn't update the aside content very well","2023-12-03T00:04:49Z","https://github.com/vuejs/vitepress/issues/3251",0.7303037,["Reactive",2965],{},["Set"],["ShallowReactive",2968],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fDEhnfFrNSMjCK0C39OZU5oTdqDM4KrrCgrTLNRiK-mQ":-1},"/vuejs/vitepress/620"]