maximepvrt/nuxt-mdc

MDC supercharges regular Markdown to write documents interacting deeply with any Vue component.

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 💚