Skip to content
MDX logoMDX v1.3.2
GitHub logo

Vue

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.

Installation

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
Previous:
Render MDX to the terminal
Next:
Advanced