vite2-markdown

Markdown for Vite2

• Use Vue components in Markdown

Install

Install

npm i vite2-md

// vite.config.js

import Vue from '@vitejs/plugin-vue'
import md from 'vite2-md'

export default {
  plugins: [
    Vue({
      include: [/\.vue$/, /\.md$/], // <--
    }),
    md(),
  ],
}

And import it as a normal Vue component

Import Markdown as Vue components

<!-- MarkDown Compontents -->
<template>
  <article class="markdown-body" v-html="content">
  </article>
</template>

<script lang="ts" setup>
const props = defineProps({
  content: String
})
</script>

<template>
      <Markdown :content="intro"/>
</template>
<script lang="ts" setup>
  import Markdown from "@/components/Markdown.vue";
  import intro from "../markdown/intro.md";

</script>

Recommend

You can import A CSS package for It looks beautiful

npm i github-markdown-css

// main.js
import 'github-markdown-css'

License

MIT License © 2020-PRESENT Anthony Xiaoy