Nuxt MDC

MDC supercharges regular Markdown to write documents interacting deeply with any Vue component. MDC stands for MarkDown Components.

• ✨  Release Notes
• 🏀  Online Playground
• 🧩  VS Code Extension

Features

• Mix Markdown syntax with HTML tags or Vue components
• Unwrap any generated content (ex: <p> added by each Markdown paragraph)
• Use Vue components with named slots
• Support inline components
• Add attributes and classes to inline HTML tags

Learn more about the MDC syntax on https://content.nuxtjs.org/guide/writing/mdc

Install

# Using npm
npm install --save-dev @nuxtjs/mdc

# Using yarn
yarn add --dev @nuxtjs/mdc

# Using pnpm
pnpm add --dev @nuxtjs/mdc

Then, add @nuxtjs/mdc to the modules section of your nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/mdc']
})

Use

Parse MDC content in any environment:

import { parseMarkdown } from '@nuxtjs/mdc/runtime'

async function main(mdc: string) {
  const ast = await parseMarkdown(mdc)

  // Do your magic with parsed AST tree

  return ast
}

Render MDC content with <MDC> component:

<template>
  <MDC :value="md" tag="article" />
</template>

<script setup lang="ts">
const md = `
::alert
Hello MDC
::
`
</script>

💻 Development

• Clone repository
• Install dependencies using pnpm install
• Prepare using pnpm dev:prepare
• Try playground using pnpm dev

License

MIT - Made with 💚