@vises/vite-plugin-mdx
v1.0.2
Published
Vite plugin for MDX
Downloads
4
Readme
====================== WE ARE LOOKING FOR A NEW MAINTAINER ====================
Vite Plugin MDX
Vite plugin to use MDX v1 with your Vite app. For MDX v2 use @mdx-js/rollup
instead, this comment explains how to implement it.
Features:
- Works with React and Preact.
- Works with Vue [WIP].
- HMR support.
- SSR support.
- Plugin support, such as remark-frontmatter.
Getting Started
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> ) }
Examples
File-specific options
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,
]
}
})
Pre-built transclusion
To embed an .mdx
or .md
file into another, you can import it without naming its export. The file extension is required. Remark plugins are applied to the imported file before it's embedded.
import '../foo/bar.mdx'