undown

Markdown component for Vue.

Usage

Install package:

# npm
npm install undown

# yarn
yarn add undown

# pnpm
pnpm install undown

Import:

<script setup lang="tsx">
import { defineComponent } from "vue";
import { Markdown } from "undown";
import type { MarkdownPlugin, MarkdownComponents } from "undown";
import { alert } from "@mdit/plugin-alert";
import { tasklist } from "@mdit/plugin-tasklist";

const content = "# Hello, World!";
const plugins: MarkdownPlugin[] = [
  alert,
  [
    tasklist,
    {
      // your options, optional
    },
  ],
];
const components: MarkdownComponents = {
  pre: (_props, { slots }) => {
    return h("pre", slots.default?.());
  },
  h1: (props, { slots }) => {
    return (
      <h1 class="text-3xl font-semibold mt-6 mb-2" {...props}>
        {slots.default?.()}
      </h1>
    );
  },
  Counter: defineComponent({
    setup() {
      const count = ref(0);
      return () => h("button", { onClick: () => count.value++ }, count.value);
    },
  }),
};
</script>

<template>
  <Markdown :content :components :plugins />
</template>

License

Published under the MIT license. Made by community 💛