Vite-plugin-mdx-pro NPM

vite-plugin-mdx-pro

Vite Plugin MDX

examples：

Getting Started

Install:
```
npm i vite-plugin-mdx-pro -D
```

Add the plugin to your vite.config.js.

 // vite.config.js

 export default defineConfig({
   plugins: [
     viteMdx({
       framework: Framework.React,
     }),
     reactRefresh({
       include: /\.(mdx|jsx|tsx)/,
     }),
   ],
 });

You can now write .mdx files.

Hello.mdx

import { Counter } from './Counter.jsx';

# Hello Vite MDX React

This text is written in Markdown.

MDX allows Rich React components to be used directly in Markdown: <Counter/>

Edit `Counter.jsx` or `Hello.mdx` and save to experience HMR updates.

 // App.jsx
 import { useState } from 'react'
 import logo from './logo.svg'
 import './App.css'
 import Hello from './Hello.mdx'

 function App() {
   const [count, setCount] = useState(0)

   return (
     <div className="App">
       <Hello />
     </div>
   )
 }

 export default App

vite-plugin-mdx-pro v1.0.1

vite-plugin-mdx-pro

Getting Started

More links