.mdx文件格式是否仅支持React.js？其他前端框架能否使用？

API 探路者

2026-10-1

网上几乎所有参考资料都提到MDX与React.js搭配使用。尽管其他框架或库也可通过组件支持MDX，但我还没在React生态外见过“.mdx”文件格式的具体应用场景。
Gatsby和Next.js对“.mdx”文件的支持允许我们为博客文章创建单独的文件夹，还可以将文件存储在任意位置（CMS、Github等），便于内容管理。而且“.mdx”文件扩展名本身非常直白易懂，即便是初学者也能快速理解其概念。
因此我想咨询：如果我想要使用mdx文件，是否只能选择React.js？能否在Svelte、Vue、Angular等其他前端框架中使用MDX？

问题解答

核心结论

MDX 并非只能搭配 React.js 使用，目前 Svelte、Vue、Angular 等主流前端框架都有成熟的 MDX 支持方案，完全可以在非 React 项目里正常使用 .mdx 格式文件。

各框架对应支持方案

Svelte 生态：使用 MDsveX 作为 MDX 适配工具，它原生支持在 .mdx 文件中嵌入 Svelte 组件，SvelteKit 也内置了对该工具的官方支持，可直接配置启用，支持自定义内容布局、传入组件作用域等常用功能，和 React 生态中使用 MDX 的体验基本一致。
Vue 生态：有两种主流实现方案，一是官方维护的 @mdx-js/vue 适配包，完美支持 Vue 3；二是 vite-plugin-mdx 插件，在 Vite 搭建的 Vue 项目中可直接引入 .mdx 文件使用，文件内嵌入的 Vue 组件可正常渲染，Nuxt 框架也提供了对应的 MDX 模块，开启后即可直接使用。
Angular 生态：可以使用 @analogjs/content 包实现 MDX 支持，允许直接导入 .mdx 文件，同时支持在 MDX 内容中嵌入 Angular 组件。基于 Angular 的元框架 Analog 本身就内置了完善的 MDX 支持，普通 Angular 项目也可以搭配自定义加载器完成 MDX 接入。