Practice of using Vite2+Vue3 to render Markdown documents

One problem that most developers using Vite2 encounter is that there is no relevant introduction to support Markdown in the document. So what should I do if I want to support Markdown introduction and rendering in a Vite project? This article will introduce two ways.

Customize Vite plug-in

If you go to online related issues, most of them are in this way, which is to customize the plug-in, so that Vite supports Markdown rendering. The specific methods are as follows:

Create a file in the project root directory and fill it with the following content:

import path from 'path';
import fs from 'fs';
import marked from 'marked';

const mdToJs = str =&gt; {
  const content = (marked(str));
  return `export default ${content}`;
};

export function md() {
  return {
    configureServer: [ // For development      async ({ app }) =&gt; {
        (async (ctx, next) =&gt; {
          // Get a file with the suffix .md and turn it into a js file          if (('.md')) {             
             = 'js';
            const filePath = ((), );
             = mdToJs((filePath).toString());
          } else {
            await next();
          }
        });
      },
    ],
    transforms: [{  // for rollup      test: context =&gt; ('.md'),
      transform: ({ code }) =&gt; mdToJs(code)
    }]
  };
}

Then modify it to introduce the plug-in created above.

import {md} from './md';

export default {
  plugins: [md()]
};

In this way, when used, the imported md file will be converted into js file rendering. Specific usage examples:

<template>
<article v-html="md" />
</template>

<script lang="ts">
import md from './'
export default {
setup(){

  return {md}
  
  }
}

Use vite-plugin-markdown

This third-party plug-in not only supports the introduction and rendering of Markdown files, but also supports rendering into various formats, such as HTML strings, React or Vue components.
Install vite-plugin-markdown.

npm i vite-plugin-markdown

Modify in:

const mdPlugin = require('vite-plugin-markdown')

export default {
  plugins: [
    ({
      mode: ['html'],
    })
  ]
}

Pass in the configuration an option object, the following parameters are supported:

mode?: ('html' | 'toc' | 'react' | 'vue')[]

markdown?: (body: string) => string

markdownIt?: MarkdownIt |

Rendering examples in each mode:

Import Front Matter attributes

---
title: Awesome Title
description: Describe this awesome content
tags:
  - "great"
  - "awesome"
  - "rad"
---
# This is awesome
Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.

import { attributes } from './contents/';

(attributes) //=> { title: 'Awesome Title', description: 'Describe this awesome content', tags: ['great', 'awesome', 'rad'] }

Import compiled HTML ()

import { html } from './contents/';

(html) 
//=> "<h1>This is awesome</h1><p>ite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.</p>"

Import ToC metadata ()

# vite

Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.

## Status

## Getting Started

# Notes

import { toc } from './contents/'

(toc)
//=> [{ level: '1', content: 'vite' }, { level: '2', content: 'Status' }, { level: '2', content: 'Getting Started' }, { level: '1', content: 'Notes' },]

Import as a React component ()

import React from 'react'
import { ReactComponent } from './contents/'

function MyReactApp() {
  return (
    <div>
      <ReactComponent />
    </div>
}

Import as a Vue component ()

<template>
  <article>
    <markdown-content />
  </article>
</template>

<script>
import { VueComponent } from './contents/'

export default {
  components: {
    MarkdownContent: VueComponent
  }
};
</script>

Written at the end

This is the article about the practice of using Vite2+Vue3 to render Markdown documents. For more related content related to Vite2+Vue3 to render Markdown, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!