@f3ve/vue-markdown-it NPM

About The Project

This is a component for easily integrating markdown-it in Vue 3. This project was inspired by markdown-it-vue. which hasn't been updated in a while and only supports Vue 2.

Built With

Getting Started

Prerequisites

Vue 3

npm i vue

Installation

npm i @f3ve/vue-markdown-it

Usage

Importing the Component

You can directly import the component in your SFC file.

<script setup>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';

const post = ref();

onMounted(async () => {
  const res = await api.get('/post');
  post.value = res.data;
});
</script>

<template>
  <vue-markdown-it :source="post" />
</template>

Using the Plugin

You can also use the plugin to register the component globally.

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { VueMarkdownItPlugin } from '@f3ve/vue-markdown-it';

const app = createApp(App);

app.use(VueMarkdownItPlugin);

app.mount('#app');

Using markdown-it Plugins

You can add markdown-it plugins using the plugin prop. plugin expects an array of markdown-it plugins. If you want to configure the options of a plugin you can nest the plugin and its options in an array.

<script setup>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';
import myPlugin from 'myPlugin';
import myPluginWithOption from 'myPluginWithOptions';

const post = ref();

onMounted(async () => {
  const res = await api.get('/post');
  post.value = res.data;
});
</script>

<template>
  <vue-markdown-it
    :source="post"
    :plugins="[myPlugin, [myPluginWithOptions, { option1: true }]]"
  />
</template>

Using Markdown-it Options & Presets

See Markdown-it docs for more information

Options

<script setup>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';

const post = ref();
const options = {
  html: true,
  linkify: true,
};

onMounted(async () => {
  const res = await api.get('/post');
  post.value = res.data;
});
</script>

<template>
  <vue-markdown-it :source="post" :options="options" />
</template>

Presets

<script setup>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';

const post = ref();

onMounted(async () => {
  const res = await api.get('/post');
  post.value = res.data;
});
</script>

<template>
  <vue-markdown-it :source="post" preset="commonmark" />
</template>

Using Presets and Options together

<script setup>
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';

const post = ref();
const options = {
  html: true,
  linkify: true,
};

onMounted(async () => {
  const res = await api.get('/post');
  post.value = res.data;
});
</script>

<template>
  <vue-markdown-it :source="post" :options="options" preset="commonmark" />
</template>