Vite plugin to use MDX with your Vite app.
Features:
- Works with MDX v1 and MDX v2.
- Works with React and Preact.
- Works with Vue [WIP].
- HMR support.
- SSR support.
- Plugin support, such as remark-frontmatter.
-
Install:
- Vite Plugin:
npm install vite-plugin-mdx
- MDX v1:
Or MDX v2:
npm install @mdx-js/mdx
npm install @mdx-js/mdx@next
- MDX React:
Or MDX Preact:
npm install @mdx-js/react
npm install @mdx-js/preact
- Vite Plugin:
-
Add the plugin to your
vite.config.js
.// vite.config.js import mdx from 'vite-plugin-mdx' // `options` are passed to `@mdx-js/mdx` const options = { // See https://mdxjs.com/advanced/plugins remarkPlugins: [ // E.g. `remark-frontmatter` ], rehypePlugins: [], } export default { plugins: [mdx(options)] }
-
You can now write
.mdx
files.// hello.mdx import { Counter } from './Counter.jsx' # Hello This text is written in Markdown. MDX allows Rich React components to be used directly in Markdown: <Counter/>
// Counter.jsx import React, { useState } from 'react' export { Counter } function Counter() { const [count, setCount] = useState(0) return ( <button onClick={() => setCount((count) => count + 1)}> Counter: {count} </button> ) }
To define options a per-file basis, you can pass a function to the mdx
plugin factory.
mdx((filename) => {
// Any options passed to `mdx` can be returned.
return {
remarkPlugins: [
// Enable a plugin based on the current file.
/\/components\//.test(filename) && someRemarkPlugin,
]
}
})