Vue

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.