Nuxt MDC
MDC supercharges regular Markdown to write documents interacting deeply with any Vue component. MDC stands for MarkDown Components.
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
npm install --save-dev @nuxtjs/mdc
yarn add --dev @nuxtjs/mdc
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)
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 💚