0.2.0 • Published 3 years ago
@brillout/vite-plugin-mdx v0.2.0
Vite Plugin MDX
Vite plugin to use MDX for 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.
Getting Started
Install:
- Vite Plugin:
npm install @brillout/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 '@brillout/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> ) }