VueJS version of react-markdown

Vue component to render markdown without using innerHTML

Feature highlights

• Safe by default (no innerHTML or XSS attacks)
• Extensible (you can pass your own component to use instead of <h1> for # hi)
• Plugins (support remark and rehype plugins)

The implementation is 90% shamelessly copied from https://github.com/remarkjs/react-markdown.

Changes include:

• Replacing React specific component creation with VueJS components
• Porting the implementation from javascript with JSDoc types to typescript
• Testing with Vitest instead of nodejs built-in test module
• Development and preview with Histoire
• Using Vite instead of esbuild

Please check the original repo for in-depth details on how to use.

Installation

npm install markdown-vue # using npm

yarn add markdown-vue # using yarn

pnpm install markdown-vue # using pnpm

Usage

VueJs

<script setup lang="ts">
        import VueMarkdown from 'markdown-vue'
</script>

<template>
        <VueMarkdown source="# Hello, *world*!" />
</template>

NuxtJS

• Add markdown-vue/nuxt to the modules section of nuxt.config.ts

export default defineNuxtConfig({
        modules: ['markdown-vue/nuxt']
})

<!-- VueMarkdown is auto imported -->
<template>
        <VueMarkdown source="# Hello, *world*!" />
</template>

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

Note

Currently, your page will be crash if you use this component in Nuxt project dev mode and I can't figure out why. If you figure out the solution, please feel free to create a PR. I will gladly to merge it.

TODO

• Port unit tests from from original library
• Playground with github page
• Fix NuxtJs dev error