Skip to content
MDX logo
v1.5.9GitHub logoTwitter logo
GitHub logoTwitter logo


This guide is a WIP

If you want to initialize a project to try Vue + MDX you can use the Vue example. You can scaffold out a project with npm init mdx vue.

If you want to incorporate MDX into an existing Vue project, keep reading.


yarn add @mdx-js/vue-loader

Configuring webpack

In a Vue CLI you need to add a webpack.config.js that uses the MDX loader for vue:

module.exports = {
configureWebpack: {
module: {
rules: [
test: /.mdx?$/,
use: ['babel-loader', '@mdx-js/vue-loader']

That’s it. Now restart your server and you should be able to create .mdx files and import them in other components.

Edit this page on GitHub
Render MDX to the terminal