Vite + Markdown

Install

yarn add -D vite-plugin-markdown @babel/preset-react @babel/preset-typescript @babel/env babel-plugin-module-resolver

Setup babel config

create .babelrc.js

const presets = ['@babel/env', '@babel/react', '@babel/preset-typescript'];
const plugins = [
  [
    require.resolve('babel-plugin-module-resolver'),
    {
      root: [__dirname, './src'],
      extensions: ['.jsx', '.js', '.ts', '.tsx', '.json']
    }
  ]
];

module.exports.config = { cacheDirectory: './tmp/babel', presets, plugins };

/**
 *
 * @param {import('@babel/core').ConfigAPI} api
 * @returns {import('@babel/core').TransformOptions}
 */
module.exports = function (api) {
  api.cache(true);

  return { presets, plugins };
};

Vite configuration

Configure Vite to handle TypeScript and ESM: Ensure your vite.config.ts (or vite.config.js if you're using JavaScript) is set up to handle TypeScript and ESM.

import * as mdp from 'vite-plugin-markdown';
const { plugin: mdPlugin, Mode } = mdp;
const config = {
  plugins: [mdPlugin({ mode: [Mode.HTML, Mode.MARKDOWN, Mode.TOC, Mode.REACT] })], // you can change react to Mode.VUE
}
export default defineConfig(config);

Here my full working vite.config.ts for reference

import react from '@vitejs/plugin-react';
import dotenv from 'dotenv';
import { createRequire } from 'node:module';
import path from 'upath';
import { UserConfig, defineConfig } from 'vite';
import * as mdp from 'vite-plugin-markdown';

const { plugin: mdPlugin, Mode } = mdp;
dotenv.config({ override: true });

const require = createRequire(import.meta.url);

const config: UserConfig = {
  plugins: [react(), mdPlugin({ mode: [Mode.HTML, Mode.MARKDOWN, Mode.TOC, Mode.REACT] })],
  server: {
    port: 4000
  },
  resolve: {
    alias: {
      '*': path.resolve('.'),
      '@utils': path.resolve('./src/utils'),
      '@components': path.resolve('./src/components'),
      '@routes': path.resolve('./src/routes'),
      '@assets': path.resolve('./src/assets'),
      '@src': path.resolve('./src'),
      '@root': path.resolve('./'),
      '@post': path.resolve('./src/posts'),
      'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime'),
      'react/jsx-runtime': require.resolve('react/jsx-runtime')
    }
  }
};

export default defineConfig(config);

Conclusion

all done. you can refer to this repository to view examples usage to render markdown