Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@nuxtjs/mdc

Package Overview
Dependencies
Maintainers
2
Versions
33
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nuxtjs/mdc

Nuxt MDC module

  • 0.2.8
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
39K
decreased by-10.79%
Maintainers
2
Weekly downloads
 
Created
Source

Nuxt MDC

Nuxt MDC

npm version npm downloads License Nuxt

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

# 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 💚

FAQs

Package last updated on 22 Nov 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc