VueJS version of react-markdown
Vue component to render markdown without using innerHTML
Feature highlights
- [x] Safe by default (no
innerHTML
or XSS attacks) - [x] Extensible (you can pass your own component to use instead of
<h1>
for# hi
) - [x] 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 withVueJS
components - Porting the implementation from
javascript
withJSDoc
types totypescript
- Testing with
Vitest
instead of nodejs built-in test module - Development and preview with
Histoire
- Using
Vite
instead ofesbuild
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 themodules
section ofnuxt.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
- [x] Port unit tests from from original library
- [x] Playground with github page
- [x] Fix
NuxtJs
dev error (fixed by @starknt)