```\r\n\r\nIt doesn't seem to be correct:\r\n\r\n\r\n\r\nHow to make it look correct, just like on the homepage?:\r\n\r\n\r\n\r\n",[3114],{"name":3027,"color":3028},4273,"How to use default Vue components elsewhere","2024-12-03T17:27:39Z","https://github.com/vuejs/vitepress/issues/4273",0.7742643,{"description":3121,"labels":3122,"number":3124,"owner":3030,"repository":3031,"state":3125,"title":3126,"updated_at":3127,"url":3128,"score":3129},"### Describe the bug\r\n\r\nI'm trying to document a CSS library, and our docs have lots of embedded HTML examples.\r\n\r\nGenerally, this works fine, but now and again [they nuke the page](https://github.com/spectre-org/spectre-docs/issues/17) with:\r\n\r\n```\r\nHydration completed but contains mismatches.\r\n```\r\n\r\nI've attempted to isolate the mismatch by methodically reducing the HTML, attribute-by-attribute, with the aim of determining what if anything is causing this.\r\n\r\nDuring this process I did find an attribute `role=\"button\"` which, when removed, rendered the whole page properly.\r\n\r\nHowever, I also found that removing other markdown elements from the page but _keeping_ the `role` attribute allowed the page to render properly.\r\n\r\nI have validated the HTML and it is valid, and along with the rather random behaviour of removing also-valid markdown nuking the page, this feels like a bug in VitePress or Vue – somewhere.\r\n\r\nI've created a reproduction and included detailed instructions on the page.\r\n\r\nHere also is a GIF showing the issue:\r\n\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/vite-3kwuru?file=docs%2Fexample.md\r\n\r\n### Expected behavior\r\n\r\nThe page should render with both the HTML example and the static markdown in the page.\r\n\r\n### System Info\r\n\r\n```Text\r\nSystem:\r\n OS: macOS 14.5\r\n CPU: (12) arm64 Apple M3 Pro\r\n Memory: 156.36 MB / 36.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 20.15.1 - /usr/local/bin/node\r\n Yarn: 1.22.22 - /usr/local/bin/yarn\r\n npm: 10.7.0 - /usr/local/bin/npm\r\n pnpm: 8.15.6 - /usr/local/bin/pnpm\r\n Browsers:\r\n Brave Browser: 122.1.63.169\r\n Chrome: 128.0.6613.120\r\n Chrome Canary: 130.0.6707.0\r\n Edge: 128.0.2739.67\r\n Safari: 17.5\r\n npmPackages:\r\n vitepress: ^1.3.4 => 1.3.4\r\n```\r\n\r\n\r\n### Additional context\r\n\r\nI note the new `data-allow-mismatch` attribute in Vue 3.5:\r\n\r\n- https://vuejs.org/api/ssr.html#data-allow-mismatch\r\n\r\nIt seems that I can make this work in my VitePress repo _if_ I add it in a `div` in the page:\r\n\r\n```md\r\n\u003Cdiv data-allow-mismatch>\r\nThis is an intro\r\n\r\n\u003Cdiv>Here is an example\u003C/div>\r\n\u003C/div>\r\n```\r\n\r\nBut this isn't really workable.\r\n\r\nI tried adding it to the components in my ejected theme, but it didn't work.\r\n\r\n### Validations\r\n\r\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\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] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3123],{"name":3065,"color":3066},4189,"closed","Simple example of hydration error (with repo)","2024-09-24T04:43:25Z","https://github.com/vuejs/vitepress/issues/4189",0.74973303,["Reactive",3131],{},["Set"],["ShallowReactive",3134],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fs_ziaVTx4kayS3y7ZWpWbQM0RkOh5zNQ5m0uKvD9H8A":-1},"/vuejs/vitepress/4005"]