MDX support

[csr632]

Is your feature request related to a problem? Please describe. mdx help us import markdown as React/Vue component, or use component in markdown, which is a great feature for documentation. I think vite+mdx is a perfect match:

• vite help us developing documentation code much faster.
• mdx improve the expressiveness of our markdown. mdx could also support hmr.

Describe the solution you'd like A mdx plugin for vite, maybe vite-plugin-mdx. It is not developed yet, but here is a naive prototype: https://github.com/csr632/test-vite/blob/plugin-mdx/vite.config.ts (this demo depend on this vite pr)

I guess mdx can also be directly build into vitepress. But I think a vite-plugin-mdx is still necessary:

• vitepress is vue-only, but a vite-plugin-mdx could benefit both vue and react users. (by the way, vue support of mdx is still in alpha)
• vitepress is a opinionated site generator, but a vite-plugin-mdx could benefit any app, giving developers more control.

By the way, vitepress should really consider adopting mdx and use vite-plugin-mdx! I think they are great match, too!

Would you accept a vite-plugin-mdx as an official plugin? I would love to help developing it!

[yyx990803]

Feel free to work on a plugin to use MDX with Vite - we can transfer it to vitejs organization once it's stable.

That said, MDX doesn't make sense for VitePress.

1. VitePress is designed to be Vue only - this is required for the navigation structure, theming and advanced optimizations.

2. VitePress already supports treating plain markdown files as Vue SFCs, which allows using all Vue SFC features inside normal markdown, and has much better optimization. MDX transpiles markdown to JSX render functions, which is terribly inefficient (double payload cost + unnecessary hydration of static content) unless there are optimizations I am unaware of. In comparison, VitePress markdown processing with Vue 3 automatically strips all static parts of your markdown from the compiled JavaScript so there is no unnecessary JavaScript or hydration cost. I don't mean to belittle their work - it's useful for React users for sure, but MDX trying to support Vue is... a bit pointless.

[csr632]

Currently avaliable at https://github.com/csr632/vite-plugin-mdx I will explore more use cases of "mdx+vite" and make it stable.