Vite Plugin Markdown

2.2.0 verified Sat Apr 25 auth: no javascript

Vite plugin to import Markdown files as JavaScript modules, supporting Modes for Vue components, React components, HTML, and raw markdown. Current stable version 2.2.0 works with Vite >=2.0.0 (including v4 and v5). The pre-release v3.0.0 versions require Vite 5+ and are ESM-only. Key differentiators: easy integration with Vue and React, multiple import modes, TypeScript type definitions included. Actively maintained with regular updates.

Common errors

error Cannot find module 'vite-plugin-markdown' or its corresponding type declarations. ↓

cause Missing dependency or TypeScript not resolving types; package ships types but needs 'moduleResolution' set to 'bundler' or 'node16'.

fix

Run npm install --save-dev vite-plugin-markdown and ensure tsconfig.json has "moduleResolution": "bundler".

error The requested module 'vite-plugin-markdown' does not provide an export named 'Mode' ↓

cause Using named import `{ Mode }` with a CommonJS environment that doesn't support named exports.

fix

Use default import import markdownPlugin from 'vite-plugin-markdown' and access markdownPlugin.Mode, or switch to ESM.

error Error: Unsupported dynamic import: ./example.md?raw - consider using ?raw for raw markdown ↓

cause Trying to import raw markdown but Mode.MARKDOWN not enabled in plugin config.

fix

Add Mode.MARKDOWN to the mode array in plugin configuration.

Warnings

breaking v3.0.0-0 requires Vite >=5 and is ESM only. ↓

fix Upgrade to Vite 5+; convert project to ESM or stick with v2.x if CommonJS is needed.

deprecated The default export from 'vite-plugin-markdown' may change after v3 stable release. ↓

fix Use named imports like { Mode } or `markdownPlugin.default` for safety; refer to migration guides.

gotcha Mode.VUE only works if Vue plugin is installed and configured in Vite. ↓

fix Ensure @vitejs/plugin-vue is in your plugins and Vue is installed.

gotcha Importing markdown files with `?component` suffix requires matching mode to be enabled. ↓

fix Include Mode.VUE in the mode array when using `?component` for Vue.

Install

npm install vite-plugin-markdown

yarn add vite-plugin-markdown

pnpm add vite-plugin-markdown

Imports

vitePluginMarkdown
wrong
```
const markdownPlugin = require('vite-plugin-markdown');
```
correct
```
import markdownPlugin from 'vite-plugin-markdown'
```
Default import is the plugin function; commonjs require works only with v2, v3 is ESM only.
Mode
wrong
```
import { Mode } from 'vite-plugin-markdown/modes'
```
correct
```
import { Mode } from 'vite-plugin-markdown'
```
Mode is a named export for configuration; use enum values like Mode.HTML, Mode.VUE, Mode.REACT, Mode.MARKDOWN.
use
wrong
```
import use from 'vite-plugin-markdown'
```
correct
```
import { use } from 'vite-plugin-markdown'
```
The `use` function is a named export for use with Markdown component exports (e.g., in Vue or React); available since v2.

Quickstart

Configures the plugin with both Vue and HTML modes, then demonstrates importing rendered HTML and frontmatter from a markdown file.

// vite.config.js
import { defineConfig } from 'vite'
import markdownPlugin, { Mode } from 'vite-plugin-markdown'

export default defineConfig({
  plugins: [
    markdownPlugin({
      mode: [Mode.VUE, Mode.HTML], // or Mode.REACT
    }),
  ],
})

// Then in any .vue or .js file:
import { html, frontmatter } from './example.md'
console.log(html) // rendered HTML string
console.log(frontmatter) // parsed frontmatter object

// If using Mode.VUE, you can also import the Vue component:
import ExampleComponent from './example.md?component'
// If using Mode.MARKDOWN:
import raw from './example.md?raw' // or use Mode.MARKDOWN