Usage

Using MDX files in your Nuxt app is easy.

The module picks up all .mdx files used in your Nuxt app and converts them into Vue components. Making possible to use MDX files as Nuxt pages and regular components.

Write MDX pages

Start by creating a hello.mdx file in your ~/pages directory.

Application

pages/
  index.vue
  hello.mdx

Inside hello.mdx, add some markdown content:

hello.mdx

# Hello Nuxt MDX

<section
  id="mdx-nuxt-section"
  style={{
    color: 'white',
    backgroundColor: 'tomato',
    padding: '3rem'
  }}
>
  This a Nuxt MDX tomato.
</section>

<nuxt-link to="/guide/setup">
  back to setup page &rarr;
</nuxt-link>

Result:

Hello Nuxt MDX

This a Nuxt MDX tomato.

back to setup page →

Import MDX files in Vue

You can also import .mdx files as inside other Vue components.

<template>
  <div>
    <!-- 👇🏽 MDX file is parsed as Vue component -->
    <hello />
  </div>
</template>