vue-markdown

Getting Started

Markdown component for Vue.js. easy to use and customize.

demo

Installation

pnpm install @deuscx/vue-markdown

Usage

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

<script lang="ts" setup>
import { ref } from 'vue'
import VueMarkdown from '@deuscx/vue-markdown'
const markdown = ref('# Hello World')
</script>

<template>
  <div>
    <VueMarkdown :content="markdown" />
  </div>
</template>

Custom Component

By default, the component will render the markdown as a native element. You can customize the component by passing a custom component as a slot.

For Example:

You can use the AImage component to render images in markdown.

<template>
  <div>
    <VueMarkdown :content="markdown">
      <template #img="{ src }">
        <AImage :src="src" :width="360" />
      </template>
    </VueMarkdown>
  </div>
</template>

Custom Plugins

You can add custom plugins to the markdown component by passing them as a prop.

For Example: you can add rehypePlugin and remarkPlugin to the markdown component.

<script lang="ts" setup>
import { ref } from 'vue'
import VueMarkdown from '@deuscx/vue-markdown'
import remarkGfm from 'remark-gfm'
import rehypeRaw from 'rehype-raw'

const markdown = ref('# Hello World')
</script>

<template>
  <div>
    <VueMarkdown
      :content="markdown"
      :rehype-plugins="[rehypeRaw]"
      :remark-plugins="[remarkGfm]"
    />
  </div>
</template>

See the open issues for a full list of proposed features (and known issues).

Credits

• React Markdown

License

Distributed under the MIT License. See LICENSE for more information.