{"id":20673,"library":"vite-plugin-markdown","title":"Vite Plugin Markdown","description":"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.","status":"active","version":"2.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/hmsk/vite-plugin-markdown","tags":["javascript","vite","frontmatter","markdown","react","vue","typescript"],"install":[{"cmd":"npm install vite-plugin-markdown","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-markdown","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-markdown","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Default import is the plugin function; commonjs require works only with v2, v3 is ESM only.","wrong":"const markdownPlugin = require('vite-plugin-markdown');","symbol":"vitePluginMarkdown","correct":"import markdownPlugin from 'vite-plugin-markdown'"},{"note":"Mode is a named export for configuration; use enum values like Mode.HTML, Mode.VUE, Mode.REACT, Mode.MARKDOWN.","wrong":"import { Mode } from 'vite-plugin-markdown/modes'","symbol":"Mode","correct":"import { Mode } from 'vite-plugin-markdown'"},{"note":"The `use` function is a named export for use with Markdown component exports (e.g., in Vue or React); available since v2.","wrong":"import use from 'vite-plugin-markdown'","symbol":"use","correct":"import { use } from 'vite-plugin-markdown'"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite'\nimport markdownPlugin, { Mode } from 'vite-plugin-markdown'\n\nexport default defineConfig({\n  plugins: [\n    markdownPlugin({\n      mode: [Mode.VUE, Mode.HTML], // or Mode.REACT\n    }),\n  ],\n})\n\n// Then in any .vue or .js file:\nimport { html, frontmatter } from './example.md'\nconsole.log(html) // rendered HTML string\nconsole.log(frontmatter) // parsed frontmatter object\n\n// If using Mode.VUE, you can also import the Vue component:\nimport ExampleComponent from './example.md?component'\n// If using Mode.MARKDOWN:\nimport raw from './example.md?raw' // or use Mode.MARKDOWN\n","lang":"javascript","description":"Configures the plugin with both Vue and HTML modes, then demonstrates importing rendered HTML and frontmatter from a markdown file."},"warnings":[{"fix":"Upgrade to Vite 5+; convert project to ESM or stick with v2.x if CommonJS is needed.","message":"v3.0.0-0 requires Vite >=5 and is ESM only.","severity":"breaking","affected_versions":">=3.0.0-0"},{"fix":"Use named imports like { Mode } or `markdownPlugin.default` for safety; refer to migration guides.","message":"The default export from 'vite-plugin-markdown' may change after v3 stable release.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Ensure @vitejs/plugin-vue is in your plugins and Vue is installed.","message":"Mode.VUE only works if Vue plugin is installed and configured in Vite.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Include Mode.VUE in the mode array when using `?component` for Vue.","message":"Importing markdown files with `?component` suffix requires matching mode to be enabled.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install --save-dev vite-plugin-markdown` and ensure tsconfig.json has `\"moduleResolution\": \"bundler\"`.","cause":"Missing dependency or TypeScript not resolving types; package ships types but needs 'moduleResolution' set to 'bundler' or 'node16'.","error":"Cannot find module 'vite-plugin-markdown' or its corresponding type declarations."},{"fix":"Use default import `import markdownPlugin from 'vite-plugin-markdown'` and access `markdownPlugin.Mode`, or switch to ESM.","cause":"Using named import `{ Mode }` with a CommonJS environment that doesn't support named exports.","error":"The requested module 'vite-plugin-markdown' does not provide an export named 'Mode'"},{"fix":"Add Mode.MARKDOWN to the mode array in plugin configuration.","cause":"Trying to import raw markdown but Mode.MARKDOWN not enabled in plugin config.","error":"Error: Unsupported dynamic import: ./example.md?raw - consider using ?raw for raw markdown"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}