1.0.1 • Published 4 years ago
vite-plugin-mdx-pro v1.0.1
vite-plugin-mdx-pro
Vite Plugin MDX
examples:
- https://github.com/ShenBao/vite-notes/tree/master/plugin-examples/vite-plugin-mdx-pro-for-react
- https://github.com/ShenBao/vite-notes/tree/master/plugin-examples/vite-plugin-mdx-pro-for-vue3
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